WordPress Gutenberg block creation made easy | Hackademy _ | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

WordPress Gutenberg block creation made easy

teacher avatar Hackademy _, Visit us at http://hackademy.ydns.eu

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

13 Lessons (1h 43m)
    • 1. 1.1) Welcome

      5:21
    • 2. 1.2) Required software

      3:55
    • 3. 1.3) Get to know Gutenberg

      3:31
    • 4. 2.1) Hello world!

      19:06
    • 5. 2.2) External styles

      14:03
    • 6. 2.3) Save data

      9:04
    • 7. 2.4) Controls

      12:17
    • 8. 2.5) Automatic blocks creation WP CLI

      5:51
    • 9. 2.6) Automatic block creation: CGB

      3:27
    • 10. 3.1) Development environment

      7:22
    • 11. 3.2) Image gallery

      10:06
    • 12. 3.3) Team thumbnails

      7:53
    • 13. 3.4) Conclusion

      1:27
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

122

Students

--

Project

About This Class

The release of WordPress 5.0 officially introduced Gutenberg as the default content editor, users can now create more complex pages with just a few clicks. 

This new approach uses technologies like ReactJS and advanced JavaScript that end up by scaring some users who are not used to code on such frameworks, myself included.

Since I like challenges I decided to take the quest to understand how this Gutenberg block construction really works. After reading several tutorials, watch hour of videos and days of practice I came up with the content for this course. 

The goal of this course is to clearly explain to you how the new Gutenberg Blocks work, best practices and how you can code your own without wasting hours or days searching for snippets all hover the internet and reading dozens of tutorials.

I have been coding daily for WordPress hover the latest years, released plugins that are on the Wordpress oficial repo and designed / coded somes themes.

With this course you will be able to use the new Gutenberg editor, understand how Gutenberg blocks work, are coded and be aware of the best practices  available today.

Gutenberg doesn't have to be black magic and at the end of this course you'll be able to understand and use it to best suit your needs, start your journey today.

Meet Your Teacher

Teacher Profile Image

Hackademy _

Visit us at http://hackademy.ydns.eu

Teacher

In the true sense of the word hacking is about exploring, understand how things work and we can change them in order to make them operate as we want too.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. 1.1) Welcome: Hi. Welcome to this new scars about repressed Kotsenburg book creation. It will be a course that focus on how to create the new Gutenberg blocks. And we sure we will help you out to create your own custom eyes, Other blocks. I'll start by introducing myself. My name is wrong. This sense survival on dime your structure. I've been working in I t Muslim Web for print on the last 10 years. I worked as a Detroit gifts of glasses. I worked for some companies and now you work for a governmental institution. I ever I have a master's degree in design and multi medium. And I've been working with WordPress on the last That said 56 years a little bit about me. So I lost king cooking, bring some crossfit surf wins, good weather and waves and, of course, spend some good time in family. Now what you will earn. Okay, so disease, the mostly the curriculum off off other lessons. So we'll start to see what's the require software for WordPress weapon. And also get look off our good and work works at this moment. The notice that Gutenberg was released like one month ago. It was Lizzie really is done last December 2080. So it's really recent. Okay, so as mostly of course it will last. You let updates and we will see at the moment our Gutenberg works. Now we will also check out the block about the blocks creation. You can create box the best fit your needs. We'll use a different type of blocks. We could start with the Hello World. We love some external style sheets, and then we'll do a block that safe state, um, another block with controls, and we'll also see how we can generate. Now we can Optima ties the block creation process with two different tills, and the final chapter on the final essence we will dive into the customization off existing blocks off also affects extinct plug ins. Because to remember that not always, but most of the time is what we want to do. It more press, probably someone already created at Blufgan or a snippet or a way to do it. Okay, so it's not always good to reinvent the wheel, but because it's someone already did for us. There's no point in having all the trouble to do it again. Okay, so in at TN off this course, you will be able to surely will see our breast lovin goes. I mean, I don't know if this is your first time, but you are supposed to be intermediate. Wordpress, you there? Okay. Not a total newbie bastion seen or press for the first time. We will set. There were press environment running. We load it on a container and we will use visual studio. That's free. And it works really fine to do some quote anything. But also you will see our Gutenberg work sucks. So you sh will be. I should be comfortable working with Gutenberg, okay? And of course I mean, I almost bet that you will get some cutting skills because we will work mostly with JavaScript. Because in fact, Gutenberg works with reactor GS will also some HTML and CSS to customize our blocks. And even if you already know Israel three languages scripting languages, I believe that you will get some new insights about it. So finally, I would like to wish you good luck. So this is a challenges. It's not to really be course. Okay. Doesn't have many hours of teaching because I try to make my course. So to be specific and go straight to the point so you don't just hear me or watch me doing things that you can easily find online. Okay, So And also did create discourse, mostly because it was a requirement, because I work as they were pressed of Lauper And, of course, that I need to develop my own blocks, my good timber box. So I thought, Well, why not make a You do me course about it? So I'm going to share. Why weren't I've read the WordPress Card X about Gutenberg over and over, search it online for articles and check some videos on YouTube and now disease what I managed to get from off them. So it's It's the resume for all that information that I have acquired among my experience as a Web developer. So thank you. And good luck 2. 1.2) Required software: for the code. Everything we are using resource to do, it's simple, it's practical and it does what it's supposed to. You can eat it, just Google it. He's all stood you. You probably will get to the space. Okay, so it's really is it? Just have to download it and you will inside right away and also shake on the recommendation, as you can see testable pretty cool features and also have the because verification shows the place. I've been using it lately, and I think it's really useful for what we are just going to do hands against you. Got some really collect stations. I have this one installed. Okay, yes, lean for the JavaScript. It's important. Sees we are cutting. The blocks are most cutting the JavaScript and using these one. So it's really practical if you use it to. No. So this is for the good. Anything for the server. For the video machine that's running the server, I'm using local by flywheel yourself. Reversion. That is mostly everything that we need to, and I use it for a local development. It's really practical. It's really easy. You just create the war breast website with just a few clicks as we will do it. Pretty Iran for Easter's This is the two running. Imagine that you just want to create a new site. The only thing that you have to do to click on the plus sign, uh, Dr name. Call it a test preferred. I'll just leave them by default. Continue, said your user name. Good practice is to use something that it's not like that mean because it is the default administrator Password and some boots on crackers or whatever you want to correct. Your website will use this default as I mean, so you something like, uh, whatever in a really strong passport. The numbers special characters Just leave them by default and Side A Z can see it's already then to step Doctor Root, password and local will and creative It'll machine as from the Contender that's running the website. Everything for you. And as you can see, it's there. It's working, okay, it's really even that though my name it stairs that really practical, really useful, and that's why I have chosen There's still you can't stop the website. If you restart your computer, don't forget to also start the website okay, We'll just steal it. That work things. One okay? Yeah. Just do with it. Okay, So this is for the local Web server container, and then for the layouts. I just this tool that's called fig MMA, that it's pretty useful to create some layouts itself free. And as you can see, yes. Wait for it. Loads the layout start will be using on the lessons have created them right over here. And as he conceives works online and couldn't working collaborative met mode So you can have one more one person working at the same time. With this fig metal, you can share it. It's really useful. It's also free. That's the best. Okay, so these arguments tools that we're going to use for this course they are frame. Nevertheless, if you have any question, please drop me a line. 3. 1.3) Get to know Gutenberg: So who is Gutenberg? Hell. Guttenberg was the first person we've entered the printed press. But now it's there were press editor. So it's an editor. That s way more features than the previous editor. The ready there was like you had to install some plug ins in order to achieve some customization. Now that doesn't burn. Allow us to do more customization and by default. So this is quite recent, and I'm disease like 26 January. Okay, so it's like 19. It was released the last month. I think said quitting It's pretty new and it's now installed by default on. It does show up when you edit the page. So I'm supposing that you already have your website running over a year, Okay. And if you go toe pages is the back and you got the badge can create a new page. If you're used to the older one, you can see now that you have all these new daunting interface. But if you're not, because once you get the hang off, it will be pretty easy. So you also have these official description off September and just give us a quick over all of you great today. Okay, so but I'm going to show you. You can use it right over here and said, This is the new page. As you can see, to add a title. Well, just click on title. And these is where we will add our blocks that will build. So I want to add a new work. Just click on the plus side and you can add your work. I did notice that Gutenberg doesn't really make it easy for us to create the columns. Okay, so but I think down the road it will be easier. This is just the first real production version. I think they were pressed him will get it more granted. Better working this. Even if I want to delete this, it's not really that easy. I could just couldn't go back over here. Now imagine that you want to add a new container, Kanda plus Hein Bad blanc I can create can insert an image media library. I don't anything that is going to insert a new image and you can lighting left, right also in the middle. And they should want to add like a video because he is pretty easy to define the blocks. When we compare it to the previous version off the editor, there's not much to say about couldn't Bergen Inslee. So this isn't something that you can work with practical. And there are dozens, if not almost hundreds of videos just introducing what Gutenberg is. And for the decent reason we are not clean with the focus off the bloc's tactics, they start really not the priority because what we want to do, it's to build our own blocks, and that's what we are going to do on the next lessons. Okay, so the overall idea is just you that you can find and see how Gutenberg works overall. 4. 2.1) Hello world!: we're going to sort our different Guttenberg blocks in bludgeons because this way it's easier to keep the code more tidy and managed the function as you can see. Disease. My Gutenberg test website, Gatto Local copy, Running disease, the front end and the beckoned It is nothing. Specialties is the default installation. So for starters, I will need to install them atomic block team. Okay, maybe not. Maybe I'll have to Don't want it atomic blocks because this is a team that we will ah use just to keep goes off them other blood in that we're going to do down the road we're going to use this time. So just go in the stall. It just might. I need to quickly the same thing that supports the Gutenberg. So it's really a planted him one off. The best to work, if you are using now, the blocks and Gutenberg you want to develop custom blocks is probably it's the best him. There are other SAARC skaters, so it's a bit off personal opinion. Also, that should be good. That's not this. It also a blooding where they have Cem either break computer blocks for good number that you can also download links on the description as usual. And, ah, about the team. Activate now, over a year on the bludgeons at new that bloke Blufgan Dragon drop, because now it is blood in. You could give you also some good ideas or you to love your on box. Okay. Sallis was for it to happen. I think I got the team activated. I'll just Yes, to be good. You see? Yeah. Allocate more. Okay. They said it of personal personal taste now. So let's Bill our first plaguing our first block him. So the website is running over here. I'm working with results to do you good. It's free. It's awesome. But it works fine, because it is not a very complicated killed. Okay, so it's, I think, exhausted. You kind of performs the job very well. So I got the project open over here. If you don't already opened up this whole study gold good to file and open that followed workspace. Okay. And then you had the folder where you have where your website is running. Okay, so I already got my near as he considered it. Is the work breast default route? No. Um Let's open up. That would be content plug ins gets in the way of the atomic block. And we'll start by creating a new folder because this is where our blood in will reside. Call, click on the new folder. And even though this is not really good practice, OK, I'll just type of one. Just so we have a order on the blood is that we are going to create a game. So go one alot rules block in a real life situation, I would not do this. OK, so it is because we are not supposed to start with the one even on bloody names on the strings integer on variable names or object names. Okay, now I'm right Click and you farm and call it the next up speaking cities will be the files that were press will look for for this bunion, and we can start right away by typing the pH. Being this is just to list plug in okay on Blufgan. Okay, we'll be Hello world in the description. Okay. And let's just say this just to confirm that it's running is showing over your go to blood in the salt, bludgeons as you can see. It's right over here. Perfect. Okay, you can activate it right away. So remember that when you create the Blufgan, it's disabled by the folks who will need to come to a blood into stop plug ins and activate the bloody Now was good. The budges. And now delete the same plate pages We don't notice, Joe. And now, great. And you Page making call. It's okay. Oh, that list. And just to make it easier also, let's make this thing default home page. You can see where the bridge over here, but we can go to settings reading and he find it as their own page. Okay, Uh, his way right over here. Hello. This is where our blocks will go. The front end off our walks. And now let's open up the page. And as we have seen already, we had new blocks by clicking here on the plus side. So the goal is to create blocks that will show up right over a year. Okay, we are starting right there. So we're going to start our We're going to start by defining the block behaviors that we will The fire inside that javascript files as he continues his a BHP file. This is where we will load them the first that are needed for our block. And, well, maybe, as you know, it's also good practice to disabled direct access toe PHP files. And we'll do this on every file, and you should do it also, by denying absolute baths to the fire. If it's a direct Beth, just exit the focus that it is just to buy some militias, users trying to access pH be sensitive information. So, um, I know what you're going to do is we need to load a file the javascript file it we're going to create. We also need to give it that unique I d remember that each block as a unique idea will specify the theft to the showers. Good file. And we can also define the block. We will also define the block components that it will use. Okay, so since the start is, we're first going to create the function and we'll call it Gutenberg Boilerplate Block glows. And right down here, we're going to call it an action is a hook initialization, and we'll just type their name right this run. You're OK. So we are initializing dysfunction just to for a load over a year and even on your breasts overall. Okay? No, uh, enter person. That unity. Well, we need to register script the javascript file because most off the block and we'll leave. We'll resign inside that javascript file, so we'll start with W B Register script. Okay. Damn. Curly braces. And now it's where we need to define a Randall. Andy Sandell must be unique. Okay, we go for that's noctis. Were in ST the rackets. Gutenberg boilerplate. You see, five, we will use these former, and we'll just happy DST step 01 coma. Then we will. The final word up plugging is the fathers and the limit block that Yes, and also file over here. Then one more coma. Then we'll also set the competence that we will use. For now, we are just using these ones. But for the around the world, we will use another one. Another more components. Okay, I think this is it. And now we also need to register the block type. And these awesome must be a unique I d block type learn. You can change these names, but they noticed that you need to know and repeat exactly the same. And all across the scripts. Because if you don't, then good timber. We're breast will not know what this creeps on the ray See if I don't get lost, and I think it's OK and go say that headed her script. And this is the script that will load and all for the script that reloads on the editor side. Okay, for now, we just have this script now. I said, I'll give it a quick check. Seven know something is wrong, Okay? They shouldn't be here. You're We're like this Howard. BHP file should be ready to go if you're having issues. I mean, the good is not too complicated, But if you're having issues you can also download, it's from the resource is. But as it contains, pretty simple. We are creating hook good, but very that weapon on the initialization or for press that will call this function that we'll load the block gs script that we are going to test a great right now. Now, registering the block type that we will use now that's tackled, um, GS part the react competent and right over here, right click new far, Aziz said. For that, Yes, cause there's one here. We will define the user interface and they that that will be saved. We will send some basic styles, specify the blood in brand owners and shows him text on the back and from them. We'll start by creating the element and register the block type. And as you cannot, this this there's look a lot like react calling the route elements. Coleman. Okay, little register the block Time e blocks. Magister broke that. Then we will also said some style just to make it easier to identify our new awesome walk. Feel free to change the colors, then also sent batting. Okay, Perfect. I'll just close. This should be good. Okay. And now decided that will show on the pages on the back end. And, editor, as we have seen, we're going to register the block that right now. Okay, So we are picking up the red that walk tight. We let the components the parent parent, there's do it. It's a registered walk type on the very well. Type the handle and be name. We want to make it unique. So and it is just a Hello world XP. Step one, the pullup in the curly braces over here. And we'll surely start with the title. I told school with other world. Hi. Can we also need to set the neck? And I'm using that You never so excess. Poor packing, some girl all that I can start available right over. Just show you the link over here. You can change that, Can you could choose another. I can, just for remove that these okay, You only want this. Is that you in the store? I can just type store over a year. Okay. Well, just type starkly removed the dash seconds. They showed the chance. I can. This is the source off the icons to go. If you are using WordPress second, I mean, you can also use that comes from another source or sources like front. Awesome. Uh, coma. Then the category. As you have probably a scene the layout components to have categories ending for the layouts. And for now, that core off our plugging will be pretty simple. We'll show the following text on the editor will show something like hello. Editor s old type that it create a new function. Curly braces and they will return an element. That's the paragraph with the style that we have said right over up there in style, Step blocks time. It's the style that you created right over here. Sad blocks time. Think that said just after the curly braces Close, I'll go. Hello, leader. This is the text that will show on the head inter side on the back end off the website. Okay. E could get some spaces over your side stays. Uh, and I'll just alcohol PD is three lines. Okay, right click who be based because we're going just to make some minor changes over here instead. After edit, we less safe? No, over here. Hello, world. Because what we are going to do is when we saved the datum, the data that it will save will be just is what it will be a paragraph with the style that we defined over here and with the text l a world front. And so this is a text apple show right on the front end That's also make this locally so better, right? I'll save it. And right ovary, I'll refresh the page. Um, go to the plus sign and you concert for the what we just created the totally tell the world , or you will find it on the layout elements stuck there. I m click on the and I could surely, And as you can see, the text that we have to find it for the editor shows right over here. And if you update the page and go check it out, as you can see, it shows with the text that we define it for the front. Um OK, so this is a pretty static ah, block with member Bloc. Nevertheless, it's the working Gutenberg book and sit conceits not like, really straightforward to understand. But as long as you keep on practicing, you'll see that's something that you'll easily get them the hang of it. 5. 2.2) External styles: Okay, team. Now we are going to coat a block that lost external CSS. Tell sheets and my fix Things easier will use this him code we already at for the previous plugging the 1st 1 Because the goal right now is just where the this external CSS support. So right, click coping. Okay, Nice did. As you can see, it does it too. But we will also want to change the name we'll go and rename. Maicon called this CSS. Look, now open up the index because for starters, we just want to change their name on instead of having this within the bullet puller plate , you can ask something like, let's select all this. Sutton replaces option command F on the Mac. You couldn't have something like sicknesses work. And over here also the same justice. Lock that here. Step two. And also we're get the change over a year. This is a certain route place because we the functions must have different names. Okay, Year. And also the Adler. No, for the block. Dutch. Yes, have been it. And we'll also change this. Does he remember? Must be to say I'll just copy and paste. Okay? Not tell the world. Go for it. I don't know of external CSS work. I can You couldn't leave the that you couldn't leave the same. But we can have a description because now we have some more nationality. Save it, save it. We also need to change the name over a year. Is that blanking name? You can call it something like so it's still too. Just make things line up just a little better Loads external CSS Save it The fresh it as you concede showing a privateer It's a good sign activated. I mean the wearer's for now that the pages Hello on. And we have them our 1st 1 Sillier. I don't want safety. Anyone shows up yet Right here. As you can see him. Well, this is a good sign. Is justice test that the hooks that names the handles gamblers? They are not having any issue. Okay, I can just delete this because now we are. Ah, doing what? He went to that to learn external CSS files. Okay, so we will create two fouls one, we will be for the editor. Okay, That will show a protest over here on the back and and there will be that the style that CSS file that will be the style that will appear on the front and the Remember that you can news one file for both situations. Bet in this case, we are using ah, specific first files for the specific situations. Okay, let's start this. And over a year we are doing some regs, No tabula styles, and we'll start by registering this time with this function. Good. Make the line and we can call this CSS looks profile. Look at it. Our style. We must specify the plug ins. Where are where the vilest It does not exist yet and we must create it. We will do it right away file. I'll close this. It also used its function is to keep track off when then the files are changed Our mother fights on then hell eater dot CSS On first, we also need to create We're going to create the editor and the style CSS file because if we don't only if we know save this and executed, it will give us an error. Is like this. So just save it. Create a new farm. Editor Dotson says that stay erect over here on the corner and their style sicknesses. You also go over here now, Just make it simple for the scope in place it Because now we just need to change the over here. The the handler, that is a front end style. And over you, it's the inheritor. Sorry about this. Editor, editor and style down here. Okay, so what we're doing, what we're doing here is that we are telling we're pressed that our block will require the following files. Okay, is like a blueprint. Now, we also need to register the block types, and we do it right over a year. So we have the script that we need to load. It's the block that she has script. But we also want to load the editor on the front end. Stop, and we do it right here, editor time. And now God has a sense profile. Block editor style May see pro file. Okay. Over here. Well, 40 other one. We have the editor. We also can call this just style. Okay? And we'll just change the editor to front him so cool. I'll just save it. It took refresh looks. You can see there's legs and there yet Right over here. See if it shows up again. No. Okay, well, we'll see it in a second. OK, so this is the index PHP file. But you're doing what we're letting ourselves and defining the handles that will now set on the block that yes file Here, we need to update the antlers. This one will go CSS book the two. We'll change the title external CSS and also had a description. A little external CSS Files like that will be the same. Then we have the category. It will also be related to the layout. No progess David and the government will remove these line. That's the good part of having different plug ins. Weaken. Change it as we want to. So I'll just remove the line. And now over here, what there is going to change is instead off having to cover previous object we had over a year. We are going to specify plast night, and that will do it right? This Then we can call this class books Pettyfer. And over here is desires related to the classes that we're going to create. Call it a box in front. Now let's just had a some quick rules. Some CSS rules just to confirm that the styling it's loading. It's working disease for the heady term. Going for a background that's yellow. Seven different colors over there, and it is for them. Paragraph on the box front and call it Teoh. Okay, No, let's save it into a quick check to see how it goes. Let's see if it shows up over a year Absolute seer as it continues yellow. Okay. And for the editor, that's just what we defend it as the background as yellow, meaning that there's style. It's coming from the same farm to just final check. We updated the page will go over to the front lips. As you can see, it is the class box front, just as we want to. The class is applied, but I don't believe this. Tell it's being loaded. We go back to our code. Yeah, sure, we'll have to remove the block again unless if this time it works out headlock. External CSS block, you know, great. And let's oh, yes, it's screen. So now it's loading day. If you expect the object, you can study its loading from the CSS external file Dad, we want to. Okay, now that it's working less toe review on the coat that we have just wrote. As you can see, we now added these functions anyone just to keep track off the files you can also, I dysfunction right over here to some extra not actually feature. But it's good to have que time, and it's Ah, I'll tell you what, Don't make it easier. No testicles be these nice. Then it also set this. The troop first thing is to keep track when the file is chanted and for the free to load on the bottom off the page. Now, over a year, we are loading the editor CSS file. With this andl over here, we have the style. Do remember that they are assigned to different solutions. That one is for the editing page. Other is for the front and then over. It was quite easier. We just removed the in lines tile, and then we added the class name that we wanted to use, and these way, we managed to externalize the styles that we are using. An hour coat stays way cleaner and tidy 6. 2.3) Save data: All right. So now we will perform some changes on the first play in in order to allow the user, or maybe is to save the data directly from the beckoned. Okay, so it's, uh, Kewpie The files will copy the fact over here. I'll send them. And we need will name this from a tree se data. Okay, now let's open to files index and block Touch. Yes. Hand over here. You're going to change from step 01 extent, zero treat just to maintain the order. We also need to add a different text over here because if not, progress little show an error. Okay, so the next that beach beast days mostly the same Because we just want to load the Js file . That as well have the changes that we need Just also need to change a very good bloody name . And we can call it say, date them, and I will go with this beginnings to say on displayed saves a file you want. You can do it quick. Check just to see money to the refresh the conceptual right here to say that the blood in still in that we just well, the fame Saleh, Click on Activate And for now, just currently the sides. Okay, now let's tackle the block G s file. Now for a year, we are going to make some changes. So I start time. I can't be more organized. Let us give it seven steps over a year and we can remove this tiles. We are not going to use them for now and we'll call a rich text. Okay? Because we're going to use a rich text. So the ghosts to make an input for the user to insert some text that will show right on the front. Okay, said my column Over here. I think it's OK. 01 It's not anymore zero tree. It is not that l A world is. I see that. OK, contingent I can. If you want the catch, we will stay as layout. There's no need to change it for now. I think I know. Okay, attention over a year is way perfect. No, save it. And over here it will be the blueprint off the attributes that we're going to use. And we just want to declare a shrink. OK, said it will be a straight string where we can write a Santas, and we'll shown in front of several start back typing attributes and those braces, I'll go for the content also. Curly braces. Then we will go for the type that type is a string. Okay, Puma source. He's HTML coma selector. It's repeats for a pair, ref. Okay, so were you. We should be well said, Just tired of it is a bit now we will change their added function. This is where most of the changes will happen on Chest Ili. Remove this and we'll start by getting the content off the post, most of it inside the content. Variable from the props. Attributes Start counting the props. It's just a date that that the function gets okay because he's he's react gs. So we called it the props. No will create the function that will detect and can. Just because we are the user is going to change the content. This content will have the name off, new content open and curly braces, and we'll get it from the props and said attributes, Cross content. Yes, you content? Okay, I think it's so set now. We need to set the return because every function needs to ever return. Okay, we have this element that will go for the rich text Curly, brace this and we will be what we specified above said progress. But their own. We can also set the class day. The class time will be defining across the label. Over here. We'll see this one there. Next few lessons he will be the last name cannot. We also need to detect for any changes. And if it that that, if they happen, will use their own change content function in the value, of course. Is that content Okay, I think I believe it's OK, but just to do a quick check said my column over here, some mornings showing, but well the continent. Okay, we should be good. No, um the safe function will be more or less the same as the edit function. That's why I'm going just to copia the content over a year without basted. No, there were still getting the contents And forget the props over here because now we're dealing. We take that we can remove these un change, but we're going to return a l. That's a rich text. But this time it will be content because we want to content. Then we have the tag name, the last name on the value. Nevertheless, we don't need the bunch One change, because now we are just saving the data. So hopefully everything is okay. Maybe we can do a quick code review. As you can see, we have some warnings over a year, but we'll just live it for time being. I will save it Now back to the to the page. Okay, I'll refresh. Always check that the blood in exactly OK must be active for it to work. Because sometimes with the changes, that stuff can be disabled. Okay, it's always good to check. Now back on the page. Looks are not. There's one ignorant. Okay, I let them. Can you walk to the plus I over your non layout safe date that awesome. It's here. No. All right, test. As you can see, I can input the data Klieman to deter ball vitality or place link over here Updated refresh and it's good 7. 2.4) Controls: now we already have a block that shows steady text in the book that load sternal style sheets and another one that allowed us to insert data. Okay, disease, pretty close. However, as you consider your on the safety item, the user is Well, yes, he or she has no control on a text whatsoever. And this is what we're going to to know. Well, we're going to add some controls to the the blawg to allow the user to align the text to the left center or Right. OK, so I'll just delete this. And we are going to start by making a copy off the plug in. I'll use the the last one that saved data. OK, create copy placed it. Well, close these files, but stay Nixon. The is to change the name off the blood in chances before instead of saved date. That there's something like controls. Okay. And we are changes. The description. It was ah, tax component and full bar. Okay, as as usual with with changes. Oops. Four also for Okay. Uh, also the name off the folder. Shirley. Well, bay, it is his four day index. Step four for okay. Now, disease where will perform most of the change. So now we want to add some components that will allow us to the chance and tour until of the user to align and change the text. Good. So first things first. Are we already at a walk type? So we need to plead, create them block control and also ah, lighten to par. This will just create these new elements. It will be the block started. The block controls editor to say name As for controls coma and the Lightman toolbar who are also the same name Lyman to bar close it. Okay, now, over a year, we'll leave the chance. That makes some sense changes on theatric. It's because now we won't allow the user that makes them alignments. Alignment. It will be the time. Uh, it's a trick. Look, I think we are good over here. We are already retrieving the content that there were also went to retrieve the alignment. Pilica from the props, attributes alignment. Okay, close it. Now we're the home change will stay the same because it's regarding the content of the text content. But we want to create the function that will happen if there's a change on the alignment. I'll try not to make any type of over here. Yeah, I don't. Well, you know, for the props said attribute. However, at this time, it will be regarding, uh right now. Okay, I think it's so good over here. Now we'll add some custom blocks and has it gotten justice Insist is the react we will use . He s five to format or compliments. You could also use a form it like he s next. And he's a weapon which, like barrel g esta todo in order to compile the code. And they have a wider browser compatibility. But since we are not using, like lots of code, we are just going to type it right away. Okay? Now we'll need to perform some chances over a year. It's, ah, quite complex one. So I'll just start typing over here so we'll start with the return e l element. However, this time we are going to return to elements, so just make some changes over a year. Return L no just co p could base this back. Okay, so we'll start to create the new read their own elements. I believe India and it will be easier for us. So return space is over here on element. He Oh, it's not his way. And it will be a fragment. No. Oh, with the block controls very rich snow. And then and you need help. And here will recite the lightning toolbar that we live the value, the alignment And also the function on change will be regarding on change. Enlightment seems they're closed correctly. So I'll insert to come over here and start a new eat out element. And this time it will be for them rich text. Okay, over here we have the key. That's a veritable tak name off. Be. Remember, it's a bear breath said the class name also that style. Ok, and as we have seen, we weren't text enlightment. Okay, okay. That on change. We need this function for the changes to happen. It's content, not alignment. And finally, last but not the least the content on. If nothing is missing, I think we are all set. All good to go. Okay. Not just to wrap these up over here. We asked him in the content. Now we also want to say that alignment that is he will come for the props. Hattrick. It's yes, the Enlightenment. Also like it is what? It's best. Looks better. Okay, Perfect. So well, just now over a year for a tiny chest too. I think it's OK. That name. But we also need to add this tile. Okay, We'll do it. Idea style. Curly braces will be the text. The line on alignment. Do you think we are? We should be good to go. We'll just save it. We have quickly grief. You and I didn't notice that we're missing some elements over year, so I'll just tell him. That's only the fragment. Okay, fragment. Okay, work that. Which working? Okay. Yeah, just just his one. And forget also to change the name over year controls and the number. So say it. I think the rest it's OK. Yeah. So let's give it try plus on layout controls. And as you can see now, we do after the alignment and we can align the test. The text that we want to insert on the good just to adapt to it. As you can see, we know as the test. Okay. I know this by now. You should be. It looks like a bit too complex. Indeed, it's not like a real easy to read cut bet on the next lesson. We are going to learn how to how to make automate this process, just make things easier for us to work. 8. 2.5) Automatic blocks creation WP CLI: we have already seen how we can create the blocks from, uh, that length start. Now we are going to use a two, and see there was that we can generate this walks in order to ease the work and make it foster. Okay, so there are some examples online that you can always follow off blocks. I'll just show you seven year their feelings on the description. So, for instance, if you want to do a walk that is edit double like we did or it controls, you can also contract his kit repository. There are some more rep was available that you can also use. Okay, So bottom line is, there are some good examples online off plugs and not to use them. However, we like to make our own stuff from scratch selection. Let's use now, Ato, call W pick Klay to generate the block code for us. We'll have to log in to the virtual machine shell because we're going to run, discuss from the machine and the machine is, you know, okay. Said it is easy effort publishing. That's running. You have to right click and go open Site s s a jacket Is is to open a shell. We cannot create the block by using that. That would be too careful. Block. Hello World. The title on the bloody name The notice start. It's best he stopped money, name and chest like this. Okay, that would be cle. I tend to the name. Also the Andal must be lower case and without numbers on the beginning and what it is just to test it out to make it easier to test. But over year we're just making these work because you can see created the block Hello world. However, if you do open the book like right now, you'll see that it does not have an index file like we do over a year. There's this one. So we need to copy Discordant like this. The block you're going to copy for the route this l A world folder would copy to right here . It's considered here then the content of these other worlds the PHP file because there's the path to the cheers, folders and stuff. So but it inside the index I think we can delete both these. So in the end we'll have the whole world folder with the content for the block. Good, good. As you can see, that's the Beth for the files. Save it the thing Good. No. If you open the next such yes, as you can see the come the card. It's all commented because it's pretty useful. Created a title l. A World. The one that we specified inside the category. Widgets. Good. No, let's see over a year Lincoln Widgets. And as you can see, we're we have our walk Well from the editor, you can also check the Web page. As you can see, it's reading. Okay, so they say, there's Ah, sometime, indeed. And it's pretty useful because it device said common pitfalls off missing like a just a small character and the code won't work. Nevertheless, there are some pretty good examples. Online cultures show you, if you off them. Also, the link is on the description. Well, it is official in the rebel where you also have the examples. It's mostly likely the one that we did. So they lost half the block codes somewhere available that you can check. I imagine that you want to do a specific block. Most likely just that general structure will already be available so you don't have to do everything from scratch 9. 2.6) Automatic block creation: CGB: as we have seen in the previous chapter, we can use it to like the typically not to generate a new block. However, I would like you to introduce you to even more complete too. That's the create Couldn't book took it. And with just a few commands, we can create a new couldn't burke block that will rent out dramatically. Okay, so this is the base. You can check the the link on the description, but I'll just install it right here. Okay. Back to our of his lost. Your coat will open a terminal directly right here. Okay. Circling covert on terminal. You terminal. And we need to confirm that note. She's told it is my version off note. Also NPM and then to install these create couldn't back to it will type and yet install create gluten block stash Already everything starts aren't going to start again. If it is your first time that we already still, you will need to install it. Okay, So the process will take seven minutes that wants to stand. We'll need to in our project folder. As you can see, I at the public folder. Although inside of will be content brilliance, No create and you blow quick and be X and p X create gluten block. Hello. It will take some time. Okay, Just affect operator, as he concedes, creating their plugging. She's stalling the packages. Once it's done, we need also to go inside a folder and type NPM start. So this is just to start a Blufgan. If you we wanted to build the final version well, type and PM built and it will create a folder with the focus. Conceits was all right. It tells you what to do So much really hard. Damn start and over here Easy check out. As you can see, we have the alot right over a year. Okay? It's watching for changes back over here. Don't forget you always after you activate the blood in by default. Plug ins are not activated. So activated on the back up for a year. You cannot see. I'll delete this. There you go. It's right over yourself. As you can see, it's even more simple than the previous told that we did use 10. 3.1) Development environment: but gallery will contain any much and a text description set by the user. As we already seem, there are some blocks available on the Internet or we can use WP. Then we be clean that generate their base are that tool that we have previously seen. In my case scenario I musica set off image from and splash that Come So for the website where you couldn't look down world free images, Try it here. And also, if we take a look at the Gutenberg components, you will notice that the gallery already exists. However, we wanted to have a different look and feel one off the best gallery plug ins available that I found is called Walk Calorie by Rich Tabor and we are going to use thes. Same bloody on the next lesson. Now, since we want to add some months to the gallery, there are two approaches that we can take. The first is that we can get the blood in source and apply the changes directly on the coat on the car. Cut off the bloody are. We can try to apply these changes, but externally on the team so we can't our child team in order to try to induce those changes. Now the first option will take is to modify the plug in car and probably it would be foster . However, dis chances will be raised when we abraded the Blufgan because when a plug in its separated some off the template files off the fouls there, erase it by new ones. So the changes could be lost now on the other. And we can add the futures mostly using JavaScript and some CSS on their functions. PHP off our your child. And also, if the blood Ginette hooks, we could use them in our to insert custom behaviors. But unfortunately, it is not the case now, since we want to make some constant changes on the team, we will use atomic blocks team and we will create the child him where our chances will be. So let's talk by installing the current team. She looked there already. Goto appearance themes Add new as you can see already got the topic blocks installed. You don't just search for it. Install and activate. They steam. Okay, quick check. You can see Now it it's install. This is the best time I found out to customize using a little burke. Now we are going to create them, you child team, because we want to perform. The change is not in the parenting but in the child. So you can see these after the main team then will accept him where we can perform all the changes and extract We worked, too. Now let's open at the code editor at teams and we'll call this. Call it atomic. Yeah, show. And we'll need to create this tile. Don't CSS file. Just start. Okay. And over here, we're going toe, identify our team. Every work press didn't needs this file. Give the name off Atomic Child. And it also needs that template because yeah, guy to get the data from this atomic box. Now, we also need a phone chance that GHB file because we need to load the competence off the previous team. If the child team, we'll use it with w b. With me, I'll just end. Okay, is where it's easier that creepy que the scripts looking that IHS styles and we'll create the function. Satisfaction will run in orderto lows the parents to information that's here. All right. Here, little Justin que This times. It's the barracks style we'll get, uh, actual template directory. You were I Okay. I think this is good. And we'll also co pay the preview image so it shows that image screen shut image. So you should not go to tens. I cannot see that the new child team exploded. That's definite information. Truly basic. You could just activate it. Okay? This is where most off the action will happen. It's in style, this new style sheet that we just created. And this is where we will before most of the judges also imagine that if you want to essentials creep on traction, it would be here. We would love that JavaScript file not to perform the interactions that we want to. OK, so this is our new child. Him. It will be our playground in order. Teoh, create the Wittenberg box that we want to 11. 3.2) Image gallery: arise, such as to give you an idea that I would like to do it already. That that would like Twitter. I'll show you my figment. Okay, this is the block that it is mostly the book that we were talking so and we want This is the normal state off the image. And when the user overs overs with the mouse, their description will show. So this is what our client asked us to do. Okay, so let's try to do this. First. We need a A plug in or a good Timberg block that there's and looks more or less what we are looking for. And there's a plug in plug ins at your place. She just type here. Blow. Claire Calorie already did some previous research. OK, so that's why I'm filing this look carry or calorie right the way. And it's this one by rich table. OK, so it's good than Gutenberg compatible. Tell Justin solid. Activate and then we'll get to the page and we will add. I think we can deal it. This a little block, and it's right here values them a century style, as you can see what you can even dangerous some styles, Carol Selma century steak is so you don't need to do Oh, after his from scratch in This is one off the strongest points off using WordPress because when you want to do something, almost for sure, someone already did something, if not equal, at least familiar. So choose the in my century style and all shows day much. Okay? Drag and drop said images from that burn splash website that this Ah, just go, IHS, come download the images. Okay. I think this should be enough now back to our page. Uh, I think we already have a much semi much that we can choose. I like these ones. Okay, so far is OK, thank you. Valerie. Start gallery on. There you go. At that, I should refresh one important note. I think we have too many images. So just right. The captured yet? Let's make a big corporate it working food. Uh, open street. Take. Not very original, but just in the title. Okay. As you can see, this is the title. Now we want to hide his title. We wanted to show when they use their overs date much and we can do this just with CSS alone. Okay, Early. You will notice CSSC used to style and and my kid look like with the document that found like we want to. Okay, so let's Stoeckel this now I'll use the crow tools and using crow. A terrible Firefox will also do so. But I use group works for me pretty well now, right? Click right. Click on dead title and inspect. Yes, We went to search and figure out what's the class. Okay, so you should type over here. On the plus side, it will give you the last name. Okay? Since a pretty decent class name, sometimes they give use anti age class it. We just want the direct last night. Okay, First thing. Well, we want to ride it so we can use their capacity. Said it. Zero, as you can see. Boom, Scott. Okay, awesome. But we still need to see it. So we need to place it where we want to. Because if us sin disease What? We are looking for a white background title more or less on the center of the text in black . Okay, so let's start by having a tow position, Doc zero, because he liked it like here on the top, just to start with as it could see, that Israel already has some beddings. But we weren't too recent. Reset the Hispanic. So? So we'll set them at zero. And as important, just to resent the Patties, we want the place more or less in them. You know, we also needed as important okay, as you can see. So this is not perfectly squared in much. Okay, so that's what's not exactly the middle, but for the moment being, this is not an issue we were also went to just for the text may dictate uppercase. Also the form size a little bit bigger and the collar will be black. Also, we need to do important because for a year has already rule set the color last, but not the least Instead background. We wanted to be Eric g. P. A. And we wanted to eat the threat threat. It okay, and I touched toe. Look, just what we wanted to Yeah, I'll just select his new role ovary a copy and place it inside the style Shit for a child. Him Because at the moment, if you refresh the browser, these changes will be lost. Okay, so we need to save this. It's safe. Uh, civil. He was at it. Okay? Chances are saved. The pass it it's not activated because we still want to see what we are going to do. Oh, no. Well, maybe we just couldn't add it hard now, because what we want to do now is done. When we over they much they it will appear. So just let's just co p this class and let this and we want to look out for over, and it will be one. However, if you do this, it will be just like a quick switch between you see, It's really I mean, Ash. Okay. We wanted to be a bit marks. Move. And to do this well, let in a transition. That's regarding the opacity. It will be quite a quick one. Okay. Is he not a bagel? Let's give it that much. Uh, why not try? And as you can see, we now after them knows looking. We're lest what we want. Remember that you can also change that they much dimensions over a year. As you can see, they are totally and good looking, responsive. And these works what everywhere bottom line is that we didn't need to reinvent the wheel because we have these really good plug it that does most of the work that back and it's studies works perfectly. We can even change the styles, However, with some CSS we manage to to change the overall look two feet, the purpose that we want to. 12. 3.3) Team thumbnails: as we have seen on the previous chapter, we don't need to reinvent the wheel to achieve our goals If bloodiness freely available and the code how to rise, that we performs and changes to achieve the results. The results We worked well, we are free to this cell. And besides, we can compare the reviews and shoes from hundreds off plug ins that best sits our leads. So now we want to create the Gutenberg Block that kindly does the same. What? What you are looking into your So we have the photo, we have the them off the person and the Tyto. I did search the some timber blocks that does this, and I came up with one that I think that's the best it's called Can Zap team members Gothenburg Box. So we'll add. It s plugging at new and he should just type can set. Okay, we need to specify comes out. It's this one. Okay? It's tall now and well activated. We'll get it working just for you to see that in just a few clicks. We can never teams a team block. Okay, Less time against that team members. Okay, you can see we have the the interface. It's really, really practical. That's why I've chosen this bug in. It's really easy to add members remove it really well, coded and works pretty fine. Okay, update on our quick refresh. Does it conceal? We have the team member bloc just right here. However, we want it to look like more or less like this. Okay. Doesn't mean to be, like another percent. Exactly, but we wanted to look like this, so we'll perform some changes in order to make this aspect of good. Okay, so one important notice that previously we did, we made some CSS changes. However, some planning to give us the chance. The dishes to make changes that make the the widget the blooding look like we want to cause way are looking into a square image. Okay, so let's check out the options. As you can see, if we not taken size, I like colors. No, really. Says we can remove the social. I could Okay, We don't need them hard. A text that the text. Is it all right? Wherefore the avatar? We don't want the border radios and we don't want their with Okay, update. And we just with the simple settings. As you can see, it's looking more what we want to start about. The mind is, if you, your tent is that you want to perform, can do it right here on the back and its best. Okay, because we develop with the have crates on a car modification, it's easier to break if you do it on the CSS US template files. OK, so it's OK. We can also from some chances on the CSS because we want this image to be like rectangle. Um, and I'll just Yep, it's right this room. Now imagine well. We need to specify the CSS Room because I notice something that this room, it's mostly the same mast East one. However, these CSS rules we live, we'll have more. Let's call it force more power from this one's because this class it's more specific. The more specific classes, the more it will be important the rules to apply to that same element. And even more important, it's that in line styles and more, even more important will be serving that if years and important. Okay, so let's say this is the first place off important second place off important first place off important fourth place off part of OK, CSS. It's not really sometimes can be a bit complicated, but so let's do it this way. Ah, it could be something like wonder. Okay, you could see it tests and more square looking and object feet will be unset in there. Just look a several. Just live it at it as it is. Let's save this yes s rule. Thank you to our code editor. I'll save it and I list to the refresh. Just confirm that it's looking out we want, However, as you can poke and see, we have a little issue. It's that this image, well, it doesn't have the same format. That's this one. Okay, so there are a few ways that we can so this well, we could just try to figure a way out the center. The image are more simple for this case is to change the image, another for it to feed the square. So let's you can do it right over a year. I clicked on the image at it image and we're breast. Give us the tools to crop the image, uh, save on update. I don't need to out of the refresh over a year and out. Select image again. Okay, Conceded different now and update. Sometimes it's easier to additon image. And what would we're Breast here. Give us the tools to do it. So don't try to be with CSS tricks in order to achieve what we want to. And, as you can see, with just a few clicks options we have Ah, about this one is one okay? Looking just like this one, which just a few clicks and Gutenberg blood compatible. 13. 3.4) Conclusion: congratulations in making to the end off the course. I sincerely hope that to learn something new from this course and gain it acknowledge the create our movie fight. Guttenberg blocks. That's it. Your needs. If you need to create a specific block and can find out to do it, you can send me a message and I'll try. And I'll be glad to add a new video explaining out to achieve it. Remember that put were presses spilled and part by 1,000,000 millions off Internet users. If you want some functionality, it's highly likely that someone, somewhere already developed ID. It's a good practice to search before you build even more important in the Web environment , and the same principle works on the other way around. If you build surfing that you think it's useful and it is useful, you are more than welcome to share with the community. I hope this course is worth a good review from you. And if you are interested, you can grow in some off my other WordPress courses with the code WP want to treat exclamation marks all in uppercase. Thank you so much for your time