Getting Set Up to Build Your First Gutenberg Block: Emilio Dominguez

[00:00:00] Welcome & Announcements

[00:00:00] Amber Hinds: This is WordPress Accessibility Meetup, Building Your First Accessible Gutenberg Block with Emilio Dominguez, who is a web developer for BitBuild. We have a Facebook group that you can use to connect between meetups.

So if you’re interested in continuing the conversation after this event, this is the best place to do it. You can find it if you go to facebook.com/groups/wordpress.accessibility, or if you just search WordPress Accessibility on Facebook. Everyone always asks, “Is this being recorded?” Yes, it is being recorded.

It will take us about two weeks to get corrected captions and a full transcript, and you will be able to find both upcoming events and past recordings in one place if you go to equalizedigital.com/meetup. The other way to get notified when the recording is available is to make sure that you join our email list.

We send out a weekly email on Thursdays with a roundup of news related to accessibility from around the internet and around the world, and we also have emails that go out about event announcements and things like that. You can join our email list at equalizedigital.com/focus-state. And then finally, tune into our podcast at accessibilitycraft.com because we do put audio recordings from meetups there.

So if you want to listen while you’re doing the dishes, for example, or walking the dog, you are welcome to do that as well. If you have any suggestions for the meetup, you need any additional accommodations to make sure that the meetup works well for you, please contact us at meetup@equalizedigital.com.

[00:01:48] Organizer and Sponsors

[00:01:48] Amber Hinds: Who am I? I’ve been talking at you. I am Amber Hinds. I’m the CEO of a company called Equalize Digital, and we are the organizer of the WordPress Accessibility Meetup. Equalize Digital is a mission-driven organization and a corporate member of the International Association of Accessibility Professionals focused on WordPress accessibility.

We have a WordPress plugin called Accessibility Checker that helps you find and fix problems on your site, online courses for NVDA and VoiceOver screen reader testing, as well as selling accessibility, and we do accessibility audits, remediation, and consulting. We do have one sponsor who I want to thank today, and that is GoDaddy.

GoDaddy is very generously covering the cost of our live captions with a professional captioner who we have here today, making sure that we get good captions for everyone, and they are also covering the cost of our post-event transcription. So thank you so much to GoDaddy. If you’re not familiar with GoDaddy’s mission is to empower a worldwide community of entrepreneurs by giving them all the help and tools they need to grow online, including a simpler, safer WordPress experience.

GoDaddy provides a managed WordPress experience that is as easy as it is effective. The latest version of WordPress comes pre-installed with exclusive themes, plugins, and tools to get you up and running quickly with automated backups, updates, and malware removals so pros can spend less time on monotonous maintenance and more time building their businesses.

You can learn more about GoDaddy if you go to godaddy.com. I always say as well, if you are willing, on whatever social media platform you’re on, to give them a tag or a tweet or a comment somewhere that says, “Thank you for sponsoring captions for WordPress Accessibility Meetup,” that tells them that this matters and that it’s important and it helps them to want to continue sponsoring the captions so that we can have them available for everyone.

[00:03:58] Upcoming Events

[00:03:58] Amber Hinds: Two upcoming events to be aware of. First note is in the month of July, we will not be holding our normal first Thursday meetup. It’s super close to July 4th holiday in the US, and so we have decided to take a break that week, so we will not be meeting then. So our next meetup will be in the same time slot on Tuesday, July 21st at 10:00 AM US Central Time.

And Samantha Merritt, who works for the government in the United Kingdom, will be back. There were a lot of requests about actually showing how to remediate PDFs, and that is exactly what she’s going to do. She’s going to take an inaccessible PDF and show you how you would actually go about fixing it to make it accessible and inclusive and legally compliant.

And then on Thursday, August 6th at 10:00 AM US Central, we will have Jesse Loesberg, who is from Berkeley University in California, talking about creating a digital accessibility program in higher education. He’ll be speaking from the perspective of working for someone who got in a fair bit of legal trouble for their accessibility and had to completely overhaul their program.

So he’ll be able to talk about what that process looks like.

[00:05:23] About Today’s Speaker

[00:05:31] Amber Hinds: I am very excited. Let me pull up our speaker today so everyone can see him. To introduce today’s speaker, Emilio Dominguez. Emilio is a web developer for BitBuild, who is assigned to the Parasol Group Incorporated, where he specializes in optimizing web performance, technical SEO, and architectural efficiency. With a background in telecommunications engineering and graphic design, Emilio bridges the gap between complex code and user-friendly design through custom plug-in development and a strong commitment to the web community.

I know Emilio has given talks at other WordCamps around the world, so you may have had the luck of seeing him in person. But I am so excited to have you here today, Emilio, because I will fully admit that I have looked at coding Gutenberg blocks, and I’ve been terrified, and then I went, “No, that’s not for me.”

[00:06:22] Emilio Dominguez: Sure.

[00:06:23] Amber Hinds: But increasingly, this is the direction of WordPress. And so I am really excited that you were willing to come here and walk us all through it and show us that it doesn’t have to be scary. So welcome and thank you.

[00:06:34] Why This Session Matters

[00:06:34] Emilio Dominguez: No, thanks to you. Thanks to everyone. Well, I’m v- I’m pretty excited about this. As you mentioned, sometimes we have this hard time of just finding the correct component as the programmer, as a programmer would call, or just a block, right?

So it’s in the same sense of React because it’s, it is a big thing right now. The block is going to let you do a lot of things, right? But when you need that kind of bl- block that doesn’t suit your needs, then you need to keep finding keep installing libraries. And I have seen sites where maybe there are six to seven, eight plugins, right, that provide blocks because maybe the person that was in charge of the site was trying to find the right block with the enough features that will s- suit the, you know, the needs of the company.

So in that regard right now we have this big thing about coding even about vibe coding and letting you create your own blocks and create the way in which just suit your needs. So, so that’s what we are going to be talking about for this presentation, right?

[00:07:47] Amber Hinds: Well, awesome. I will let you share your screen.

I’m gonna go away, but I will come back at the end. So everyone, if you have any questions, please add those in the Q&A, and we will make sure that they get passed on to Emilio.

[00:08:00] Emilio Dominguez: Sure thing. So welcome everyone. It is a sunny day here in Retalhuleu, Guatemala. So, It is kind of, kind of hot, but I want to know also a little bit about you.

Where are you from? You can put e- either your flag on the chat or your country, even if you want to share a little bit about what you have done, if you have al- already coded Gutenberg blocks, or if you have maybe modified them, that, that will be also a great insight for us in order to have this support from you in this in this session, right?

It is a frightening thing, I will say, right? Everything seems like very complex when it comes to building your own stuff. But trust me, everything has changed since since we have more tools right now, right? And it is a great way in order also to, to tell the company whether you are working for a company or you are working for a client that now you have more capabilities than before to do faster things if you code from scratch, like some of you.

Or if you are going to jump into this wagon of, on AI by coding and letting some of the features that are built within those tools get get you in a better position for delivering the needs.

[00:09:31] Find Today’s Resources

[00:09:31] Emilio Dominguez: I have a repo where I have, the materials that we are going to be using today, so please feel free to get those in place. Please the PPTX is not it cannot be seen within GitHub, but PDFs do can be seen there, so that’s good. If you want to down- download the repo, that’s also good. We have some information there.

So this is going to be laying out first… at the first session or the first phase of the session, we are going to be f- finding out what this process is, and then I’m going to move to the terminal, right? And yeah, if you download, you can see the PPTX, move to the terminal, move to the side, and move to the tools that we need.

Just as a spoiler, right, or as a reminder, we do need some coding tools in place, right? And those are needed because otherwise it w- wouldn’t be possible to code your own block. Let me just start my screen share and guide you through the elements that we have on the repo.

Okay, so The repo has different files and some of you already know what we are dealing with when starting the block from scratch, right? There is also a tool that we are going to use. It’s not entirely from scratch because that will be also hard. But yeah, happy to read your responses from the chat.

A lot of people that is involved in this heavy creation, heavy coding, ACF being a good thing, right? This expanding all the capabilities of the site. And there are other sides to this development process in which we might not be coding a lot, but we do have some knowledge about maybe CSS, maybe creating a snippet or even just creating the snippet for a tracking platform and place it on your site, right?

So that also sets a precedence of you already knowing some of the tools that are needed, but yeah. So, as for the repo, what is this about? We have presentation, PDF, and PPTX, right? So that’s for the presentation. I’m going to open that, and we are going to jump into that. Then we have these files, block.json, and since we already have some, you know, very skilled coder, coders on the chat, you can also help us to answer some of the questions.

[00:12:34] Files Needed to Create a Block

[00:12:34] Emilio Dominguez: So block.json, some of you would like to answer what is this about on the chat for people just to know and maybe grab the chat afterwards and say, “Okay, I want to just glance at this and get a little bit o- of insight what the others said.” We have the block.json because we are going to see this process on the PPTX, on, on the PDF.

We have edit.js, right? Some of you already know what th- this JS is about. Maybe the JSON is a little bit more tricky to know, but this JS is regarding J- JavaScript, right? Then we have the participant handout, the presenter guide for me, but that I will say that’s valuable also for some of you.

These are not related to the block creation, right? These two, yes, and these last two, yes, right? So we have save.js. You can also speak you can talk about … You can write about this, sorry on the chat for the ones that want to explain a little bit what these files are, like block.json, what is edit, what is save, what is style.css.

But this has a different different extension, right? This has this

SCSS. So we have four files here that are needed. A block can become very complex very complex on some companies. Blocks even have classes, PHP classes, that are more oriented to heavy programming, the heavy programming side, right?

What we are building is a block that is going to be accessible, that is going to be targeting a lot of accessibility features, and then we also kind of limit the complexity of not having, not pulling data, for example. A block can pull data from somewhere, even from an API or from a CRM. It can also speak to another block, and it can bring another block, like an injection.

But for now, we are going to be keeping this simple in regards of what we are going to be building, right? As for that on the structure, we have some also some explanations on the chat.

Thank you. Thank you big time because that’s going to help help us on that, figuring out what this kind of puzzle is, right? And that we do need those files, right? A block needs a lot of files, but those are essential in order to either match the brand guidelines, match some features that the editor is going to be seeing.

So we have this part also. There are some blocks that they don’t provide that much of either brand guidelines or editor experience, so that’s also another variation. And then we could expand the editor capabilities with this code, with React code specifically.

[00:15:50] Today’s Goal

[00:15:50] Emilio Dominguez: What we are going to be doing, right, is just understanding first what this puzzle is, how to match everything, and how to enhance your sites with something that you may want to to build.

One of the things that this is going to be about is this notice block. For example sales sales that are going to be held in a, on a specific date. So how do you put this banner this little banner on the site that is going to be either with a coupon, with with a discount code with a link to some some page that you are going to run the promo in?

So this kind of like this banner, right? Maybe some of you already know maybe a plugin that lets you do that. But then this session is going to be the way just to understand, okay, I can do this with enough of these of these files, or is it something missing to build this notice block?

So we have a lot of shortcodes for WordPress. It’s the way that a lot of plugins work, even sliders,

right? Sliders work in this fashion, like giving you a short code, a lot of elements, a lot of platforms that have plugins are going to let you do that. But then we have this other side of the coin, build a real custom Gutenberg- Block from scratch, and just also tackle accessibility because that’s that’s one of the major objectives for this.

Tackle accessibility with your block in regards of passing all the tests, right? And all the verifications.

[00:17:42] Local Development Environment

[00:17:47] Emilio Dominguez: So what we have in place for this, sadly we might run out of time very fast, but we have our local development environment, so that’s going to be taken care by local, right? So I’m going to screen share my whole second screen.

So I have this process here, like everything that we are going to be targeting right now. But we need Local or Laragon or XAMPP or even just your own development server where you have access to SSH and you can run commands there. But what we need is this environment, right? So Local is a big help because it also works for all the op- operating systems.

So Local is going to let build a site just as normally, just in, in the way that we do it usually. But then we need to install something that is going to let us build the code and run the code into this block.

[00:19:05] High-level Code Overview

[00:19:10] Emilio Dominguez: This block is going to run as a component, right? As React will run because we have commands that are related to that.

So React is this big library of front-end capabilities, and it’s going to be merging these capabilities with our block. So in a sense, we become React developers, right? Because we start to, to code what the editor and what the block is going to do on the site with this code, right? So we need to understand the basic structure.

Just notice that we don’t have the CSS here because that can also be taken care of from the whole s- style of the site, right? It’s not that mandatory. And this session is going to include it, but you could have the classes there for your HTML, and then you will just include the, those classes on your big style sheet.

What the block is about is just trying to narrow everything down to its own space, like its own universe, right? So that’s that’s something that is important to know, right? So yeah. Adding attributes this is key. The editor experience, right? The save, we have a save file here, right?

We have a save file here, and why is that? And why, if you have seen some programming some React code, so this is going to mimic this you know, technically this is React code, and it’s going to let you s- also save the the way or the state as React will call into the, what the editor has chosen for that block.

So not maybe to confuse you, but if we are talking about this banner, this notice and it has two, two colors available for the background, the editor could save one color into the block on the editor page, and then that will s- stick through the site. So that’s important. Not all of the blocks save something, because maybe a block is not going to let the editor save many things.

It’s just going to render something, and that’s the thing. But this save function or these save capabilities is for the editor in order to let the editor choose, pick the settings for that block, right? JSX basi- basics is this is because we are in this realm of React code, React programming, right?

But yeah. So, all right

There’s going to be a hard time right now maybe if you want to follow, if the m- the most experienced ones, they may have already the development environment and everything set up, and they do this constantly. They just work with this constantly. So for local, just start installing that. That’s one of the pieces.

[00:22:34] Cheat Sheet

[00:22:34] Emilio Dominguez: We have the handout. We have a cheat sheet also, with everything you need to know. I may not explain myself too good because of English being my second language, but everything is there on the file. So yeah, you’re covered on that regard. You have everything there, and that’s one of the key elements of on the session too, and it’s also aiming at Mac and Windows.

I use Windows a lot, but it’s not a problem. You can do this even on Linux, right? But yeah. So ch- cheat sheet is there. The handout is there. Everything also for the code is there, but let’s see the process, right? Let’s see the steps. Okay. So by the end of the session, you will understand what this is about, like edit, the save, right?

And also how to use this kind of the basics for React code, compile, generate, and activate your own custom block, right? And also feel a little bit more confident about this.

[00:23:46] Why Build a Gutenberg Block

[00:23:46] Emilio Dominguez: Maybe in the audience there, there is this big portion of people that enjoys building things with Elementor.

I, myself, I m- myself, I like to build things with Elementor because it provides this sort of great scope or great you know, universe of features. I specifically enjoy the loop builder, and how to just build the templates, but then everything starts just to have this kind of mess, right?

With this basic tool that Elementor has, but then everything starts just to go away in the simplicity of templates and things like that. So that’s where Gutenberg comes, and it says, “Okay, you can build everything you want, but you can keep it organized in the sense that you will use only the files and you will load the files that are needed for that block, and not, you know, bring the entire library or the entire builder files and get maybe 100 files on your website calls.

So Gutenberg is native to WordPress, so that’s good, right?

[00:24:59] What is a Gutenberg Block

[00:24:59] Emilio Dominguez: So what’s the Gutenberg block?

So we have this way in order to have the component that we have discussed already. Then the files. Why the files, right? Edit what the admin sa- is going to see on the dashboard, and save JS what visitors see on the live site that has already, you know, the variables and all the state of the component or the block has already been saved by the admin, and it’s going to be reflecting those settings, those colors, font types, and things like that.

So save that JS what visitors see on the live website. This is saved to the database, right? And the edit is going to be the experience for the editor, the live preview. A warning maybe, a warning for the content that it shouldn’t be 20 words. It should be 15 words for that notice, right?

So this is important because there you put all the restraints, all the things that you need the admin to know. If you don’t put those warnings the block may crash. It’s not going to crash the entire site, but it’s going to crash the page. So the page will not be rendered, and it will just throw an error.

[00:26:24] Setting Up the Environment

[00:26:24] Emilio Dominguez: Okay. So what we need for the environment, this is key. This is key, and for the ones that are going to jump into this wagon, right, okay what do we need? We need Node.js, so we can download that the stable version, the most recent version. That’s important. And Local WP, right? So we need those two.

There are a lot of variations to this also combo that you can have, like Docker and all different things. But for the ones that are going to start with this, we need those two. How much time does it take to, to install this? About, maybe about 15 minutes regard- based on your capabilities for the computer.

But you don’t need like I7 or I9 computer for this. It’s just going to need stable internet connection to download the things and also a computer that runs, you know, the sites that you have because it’s not that heavy. It gets heavy when you start just throwing more things i- on it about how complex the block can be.

So- verify that Node is installed, right? So Node has this website where you can download the latest version, and Local WP, the same. Then what we need to do is after you install everything, right? I cannot go along a- with all that process because it takes time. But I have a site here, just a basic site for the meetup.

Everything is running on default. I have just installed this.

[00:28:04] About VS Code

[00:28:14] Emilio Dominguez: But then I have clicked on this VS Code. For the ones that are also finding out about these tools and this programming setup, VS Code is this program, this IDE, where you can spin almost any code that you want for Google Cloud, for AWS implementations, for WordPress Gutenberg blocks, for even for just small tools that, that you may want to do for yourself.

So it’s going to let you code, right? It’s going to let you code and have this massive help with all the linting that is helping you with the functions and bringing everything together in order to just d- to not do it with Notepad, right? Or with just the terminal. So it’s going to be a massive help for you, this VS Code application, right?

[00:29:06] About Node

[00:29:06] Emilio Dominguez: Then we need these programming capabilities that Node is going to let you have. I have the example here for Node. And what is Node? Node is this way to build back-end code. It’s very popular for back-end developers, and it’s going to let you build robust applications with JavaScript. So that’s what Node what I can tell you about Node.

Then you need to install that on your computer, and you need to verify that it’s installed. This is the 24 version, right? But right now, on this screen, I started the site, I started the site on local, and then I click on VS Code. So that’s important, right? I clicked on VS Code, and it’s going to bring the IDE.

I can just jump into Visual Code there. Then all the things were default on that regard and not anything was changed. Then I have the verifications that the presentation, that the slides are talking about, right?

[00:30:22] About NPM

[00:30:30] Emilio Dominguez: This node and NPM is going to let you add these high quality packages that many programmers build.

So NPM, so Node is like this robust infrastructure for coding back-end applications and coding JavaScript applications, right? But NPM is going to let you add packages. So the ones that are very familiar with the term know that there are just golden packages by programmers that have been built, and then we use that, those packages into our code, that is going to let you s- do something quite different. A lot of packages come from this. And one of the key packages for building the Gutenberg block yourself comes from NPM too. So we have now NPM version here. Let me just get this in place.

[00:31:21] Opening Files in VS Code

[00:31:30] Emilio Dominguez: So one thing also to, to notice is that we have here all the files. So what this button does on Local VS Code, the VS Code button is opening your website Files here in order to modify them, in order to bring something different into this, right?

So this is all the site. You have a lot of knowledge about this, and maybe the ones that haven’t coded before know a lot about a lot about this because you can see here that we have the includes, we have the content that is quite popular, right? It’s one of the most popular folders where we have plugins and we have uploads and themes.

So these three elements you already know, even if you haven’t coded anything at all before, these are the folders that are going to let you do a lot of things within the dashboard, right, within the admin for WordPress. So let’s keep going. We already have Local installed.

We have Node in place. We installed, we got Node from the internet. We installed that. It takes a little bit of time. We have NPM. This is about this, just all these tools that we need.

[00:32:46] How to CD into a Directory Using Terminal in VS Code

[00:32:46] Emilio Dominguez: Let’s keep going. So now the key element for this we have this command CD, right? But this could be quite tricky. I’m sorry that I’m taking a lot of time, and maybe we could run out of time to complete the whole thing, but this process is more oriented to programming. But let’s try to dissect it for the ones that haven’t coded at all.

So this process involves getting into the terminal for Visual Code. So that’s one of the key elements, because I have this already open here. But when you open Visual Code, it’s going to be in this way. So there is no terminal there. So what is the terminal? The terminal is going to let you call run commands into either your code here or the whole computer, your whole operating system, right?

So the terminal is quite helpful. How do you enable this new terminal here? And it’s going to let you also, like this could even have a separate session on all the different terminals and all the different technology that some terminals have, right? So

Chances are that when you, if you’re on a Mac, you are not going to have much of a trouble. But if you are on Windows, the terminal is going to be PowerShell. So that can be quite tricky, and some commands don’t run too well there. And I can send some other, you know, elements for this Git Bash, because for Window us- Windows users, Git Bash, the Git Bash terminal is going to let you know, get more comfortable with commands.

All right. So now some commands that are here on the cheat sheet. This CD, because if you have some experience on servers are just the same as UI. You have folders there, you have files. So I just run this command, PWD, is to l- just let me know where I’m at, what folder. So you can see that I’m on the local folder for Meetup and public.

So that’s the thing that I have in place right now. But I need to go the guide tells me to go to CD WP content, right?

And then on plugins, you use that a lot, like plugins, install plugins and deactivate, activate, delete them. So this is the folder where all the plugins are that are installed. So when something crashes and some guy tells you, “Okay, so just remove or just disable all the plugins from the server side,” this is the place where you do this, okay?

So then we are already inside that folder, but the server is able to show me this, right? I’m on that folder right now.

[00:36:07] npx command to create block

[00:36:18] Emilio Dominguez: Then we have this command, this important command, npx WordPress create block my notice block. Okay some of these just to explain it in simple terms, is going to bring this tool that is going to create the boilerplate for the block, because this is create, the create block reference, and how the folder is going to be named and also the block is going to be named and appearing on on your site.

So this must be run, okay? And maybe you can tell me, “Well, can you just have another way to do this simpler?” So this is the tricky part. You need to build the files, and you need to start to know more about the server and all these commands.

Because otherwise you will end up just installing a builder and creating your block there, right? But yeah. So we put the letter Y to create this.

[00:37:22] Troubleshooting Side Note

[00:37:22] Emilio Dominguez: And also just as a warning for the ones that are going to be trying this, you know, watching the recap, some- sometimes this is the normal process, but sometimes it’s going to be a wall of red text, right? Maybe some of the programmers can relate to that, where nothing is working, and it is just error after error, right?

So You need to have some resilience, right, on that. Not even just with a tutorial or some YouTube video, then you just have this massive red text there. So that’s where all this vibe coding is going to help you. You can take screenshots. AIs have you know, the platforms have full capabilities. You place the screenshots there.

You, you tell it, “Okay, I’m doing this. I’m facing this.” And chances are that it’s going to help you re- you know, to solve that. I will… I’m not im- in pro of any of the AI platforms, but one of the best I think I maybe I can relate is Claude, because I believe it has this precise thought process built in which it doesn’t deviate that much from the things.

[00:38:48] Outcome of npx Command to Create Block

[00:38:48] Emilio Dominguez: So maybe it wasn’t so noticeable, but we have another folder here. Yes. So that was a switch here. So it is creating, and it is just embedding so much code that this wouldn’t be possible to do it from scratch. It would be just so hard to build everything, to place every file there.

Because then what you have here is this structure of the block being there with all the needed files that are run when using the block. Okay? So one of the, you know, the common jokes is this folder, because this can be very, you know, very heavy in size, and it has a lot of files there also.

Thousand, thousands of files. And what is this about? It has all the things that are needed to run the block, right? All the accessibility things also are going to be default there, but then you start getting more things in the way.

[00:40:09] Setup Recap

[00:40:09] Emilio Dominguez: So now just, have a moment to digest what we have already done.

Okay? So from the cheat sheet, we install Node. We install Local WP. Then we open the folder for our site using Local and using this button here. Can I do it differently? Yes, you can do it with XAMPP, you can do it with Laragon, you can do it with your server, but this is the way to do it with with Local.

Then when I do this, it doesn’t work. I don’t have… i- It crash or, it crashes or it shows an error. That’s because you need Visual Code, right? And this is a program by Microsoft to do this coding, right? So just to reflect on that, VS Code must be installed, Node must be installed, Local W- WP must be installed.

Okay. Then we created the block with a precise command. Can we do it differently? No, it’s not an option. We need to do this because it’s going to provide the boilerplate and set everything there, right? This works like a plugin, so the block is a plugin, right? Okay, so then we are going to enter…

[00:41:50] Reviewing Block Boilerplate Files

[00:41:50] Emilio Dominguez: When everything is installed, right, we are going to be seeing some warnings and things like that, but you can see that most of the things are running well. If we have a fatal error, we can also be presented with that, right? So that’s a possibility on that regard. Okay? So let’s move. Seems like NPM cache might throw an error, but let’s move on.

We don’t have that much time, but let’s move on. So now from the repo, we have block.json. We have the edit.js

We don’t have the index.js because that’s already there, right? Because we don’t need to modify that. This is going to be a re- a reference in the other files. We have save.js Yes? We have Vue.js, but you can see that they are quite simple. This has just one line that is going to say, “Okay, I’m already built.”

And you can have this on the console display, and it says, “Hello from Create Block,” and things like that. We have the CSS that is quite just simple, and it has this. Okay? So in order to run the block, now you have everything here set up with all the other files, and you can s- you could say “Can I delete the other ones?”

No these are mandatory, okay? All of these are mandatory, but this is the boilerplate. This is the essential block in place.

[00:43:40] Rendering Process for the Block

[00:43:40] Emilio Dominguez: Then what we need to do is start this rendering process for the block. So we already built this little app. This… You can resemble this on this little app, right? This being a little app for React. So and then we need to start that. So let’s do it, and let’s have it with NPM start

Is this the same as before? No. The one before was previously was NPX. This is NPM, right? And this is based on something that is quite a little bit more complex, but are the commands this is based on the commands that this app is going to have, and it’s going to let you do different things with these commands.

But MPM start is going to just let you

Get this in place. Okay, so I have some Spanish here, and I have WP scripts that is throwing me an error, and why? Why is that? Because before, with this When we were creating the boilerplate, it throw an error here

In this specific place. So command fail WP scripts. So it was trying to run these WP scripts command. So what I’m going to do right now is just start this again. We don’t have time for this if it just doesn’t work. That’s going to be the culprit of this because we cannot move forward. We are not going to be doing this troubleshooting with this NPX right now.

[00:45:46] Amber Hinds: Hey, Emilio Yeah? I just wanted to jump in for a second just ’cause we are at the hour. I suspect-

[00:45:52] Emilio Dominguez: Sure …

[00:45:52] Amber Hinds: I think that our captioner might have to leave. So when-

[00:45:57] Emilio Dominguez: Sure …

[00:45:57] Amber Hinds: that happens, I can switch us to automated captions.

I don’t know, do you feel like it might be possible in 15 minutes to sort of do a summary?

I know that’s a lot to ask, but just-

[00:46:08] Emilio Dominguez: sure, no worries. Yeah.

[00:46:10] Amber Hinds: Okay

[00:46:13] Emilio Dominguez: Sure. N- no worries.

So you can see that we have this right now, right? The notice block, but this was created.

So we have this basic

structure here-

[00:46:28] Amber Hinds: I’m wondering if you could… Yeah, I’m wondering do you mind if I steer for a minute?

[00:46:33] Emilio Dominguez: Sure. Of course.

[00:46:33] Amber Hinds: So you have that plugin there. If you go into the WordPress site that you were showing us just a minute ago- yeah, that’s- Are you able to activate that plugin now?

Because you did the initial install, will it activate? Or is there anything else that has to be done?

[00:46:46] Emilio Dominguez: Yeah.

Right now it’s throwing an error to run it as a-

[00:46:50] Amber Hinds: Okay …

[00:46:51] Emilio Dominguez: as a process, but it is surely the, a plugin here, right?

So you can see that- So- … we have it here and, yeah, that’s available there.

[00:47:02] Amber Hinds: So in your cheat sheet, if we’re just trying to- … speed ahead a little bit just because of time- yeah … you would… Maybe you could walk us through what you would do next-

[00:47:12] Emilio Dominguez: Oh, yeah.

It’s number- …

[00:47:13] Amber Hinds: before you started actually working on it, starting at number three?

[00:47:16] Inserting the Block and Where to Go Next

[00:47:16] Emilio Dominguez: Yeah. So this was a process, like this very tricky process.

But then on number three, activate the plugin in WordPress. So as you said, by going here to activate the plugin. So the block is already activated now. So open a page in the editor.

The Gutenberg editor here. Thank you To the full-site editing capabilities. Then on, on this

Yeah.

So the title and then the block. So here, what we are going to be seeing when this process doesn’t give an error then you will have the rendering of the block there because you already inserted with this slash notice Then regarding the capabilities that it has, this is the basic one. It doesn’t have the w- the things that we need to place, and what are those things?

Those are the block.json, just to modify it, re-replace that, the edit file, the save file, and the style one. And that’s those files are going to be taking the place or the ones that we already have here. Where? Where, right? Plugins, notice block, and also source, the source, because if you don’t… if this is collapsed, it’s not going to let you find those.

You might say, “Okay, I am going to place them here now.” They must be on the source. So you have block.json here. You have the editor. There is no editor CSS, but you can place that in order for the experience of the editor to be also enhanced, like warnings or things like in green, like green boxes.

But we have the four elements here in order for you to just replace them on that

That will be taking up to number seven number seven to nine.

On the live reload, this is also important in regards of if you are updating your code, because you are going to be updating a lot of code here on the view file, on the save file. Block JSON not that much because it doesn’t need that much of updating. But these two, save, view, and edit, those are essentials for the block to, in order for it to just work and let you show the capabilities that the block can have, right?

So if we come back to the cheat sheet, this library load is going to let you also watch the changes that you do to your files so you need to run this command on your

on your folder of the block.

[00:51:03] Amber Hinds: I I think I might have to jump in ’cause- Sure … I do think we’re over time, and so I-

sure … I’m sorry Emilio, but I’m gonna have to- No worry … cut us off. I posted a tutorial for on the developer.wordpress.org that is also more strictly about block development.

Do you think you would be able to add your cheat sheet up to the repo so everyone can-

[00:51:26] Emilio Dominguez: Sure, yeah …

[00:51:27] Amber Hinds: reference it? And then does, is there a good place where people can follow up with you if they wanna ask any questions after looking at everything on the repo and your cheat sheet?

[00:51:40] Emilio Dominguez: Yeah, definitely.

Definitely. I’m, yeah, I have the email associated to that, so that’s a good place to start.

[00:51:48] Amber Hinds: So your contact info is in GitHub?

[00:51:50] Emilio Dominguez: Yeah.

[00:51:50] Amber Hinds: Okay. And I did see that there was a question from Farhan about where to find it, so I’m posting the link to that, and Paola also posted the link to that so you can find all of that.

But it looks like you’re just emilio-dom on GitHub as your handle.

[00:52:05] Emilio Dominguez: Correct.

[00:52:07] Amber Hinds: Okay. Great. Sure thing. I very much appreciate you coming and walking us through the process of getting set up and getting a block scaffold going. And then I think, you know, if folks dive into the code that they’ll definitely follow up with any questions, so.

[00:52:22] Emilio Dominguez: Sure thing. Thanks for having me.

[00:52:23] Amber Hinds: Yeah, thank you so much. Have a good day, everybody.

[00:52:26] Emilio Dominguez: Ha- have a good one. Goodbye. Thank you.

[00:52:29] Amber Hinds: Bye.

• GitHub repo with shared code and resources
• WordPress tutorial on creating a developer environment
• LocalWP
• Visual Studio Code (VS Code)
• Node
• Alternative local dev servers
  • WAMP
  • Apache Friends
• WordPress tutorial on getting started with block development

Platform: macOS
Tools: Terminal, LocalWP, Visual Studio Code

Before You Start

• macOS 11 Big Sur or later
• Node.js v18 or higher
• LocalWP running (green status indicator visible)
• Visual Studio Code or another code editor installed
• Terminal application open

Verify Node.js

Open Terminal and run:

node -v

Expected result: v18 or higher.

The Four Files You Will Edit

• edit.js Controls what users see in the WordPress editor.
• save.js Generates the HTML saved to the database and displayed to visitors.
• style.scss Provides shared styling for both the editor and the front end.
• block.json Defines block attributes, supports, and metadata.

Step 1: Open Terminal in Your Plugins Folder

In LocalWP, right-click the site and select Open Site Shell.

Or run:

cd ~/Local\ Sites/my-site/app/public/wp-content/plugins

Replace my-site with your LocalWP site folder name.

Step 2: Scaffold the Block Plugin

Create a new block plugin:

npx @wordpress/create-block my-notice-block

If prompted, type y and press Enter.

Step 3: Move Into the Block Folder

cd my-notice-block

Run all subsequent commands from this folder.

Step 4: Install Dependencies

npm install

This downloads the required packages into the node_modules directory.

Step 5: Start the Development Compiler

npm run start

Leave the terminal window open. The compiler will automatically rebuild assets when files change.

Step 6: Activate the Plugin

1. Go to WordPress Admin.
2. Navigate to Plugins.
3. Find My Notice Block.
4. Click Activate.

Step 7: Open the Source Files

Open the plugin folder in Visual Studio Code.

The source files are located in the src directory:

• edit.js
• save.js
• style.scss
• block.json

Step 8: Add the noticeType Attribute

Add the following attribute to block.json:

"noticeType": {
  "type": "string",
  "default": "info"
}

This stores the notice type selected by the editor.

Step 9: Add a Type Selector

Import SelectControl and add it within InspectorControls:

import { SelectControl } from '@wordpress/components';

Bind the control to attributes.noticeType.

Step 10: Add the Type as a CSS Class

Update save.js to add the selected type as a CSS class:

<section className={
  `notice notice--${attributes.noticeType}`
}>

This connects the selected notice type to its corresponding styles.

Step 11: Style the Block

The provided SCSS includes styles for:

• Info notices
• Warning notices
• Error notices
• Success notices

Verify color contrast before deploying.

Step 12: Insert and Test the Block

1. Create a new page.
2. Insert the Notice block using /notice.
3. Select a notice type in the sidebar.
4. Save the draft.
5. Preview the page.

Common Terminal Commands

Command	Purpose
npm install	Install project dependencies.
npm run start	Start the development compiler.
npm run build	Create a production build.
npm run lint:js	Check JavaScript for errors.
npm run lint:js -- --fix	Automatically fix linting issues.
npm cache clean --force	Clear the npm cache.
Ctrl + C	Stop the compiler.

Common Errors and Fixes

Problem	Solution
Red block in editor	Remove and reinsert the block, then re-enter content.
Port 8887 already in use	Stop the other LocalWP site using that port.
node not found	Install Node.js.
Changes not appearing	Perform a normal page refresh.
npm run start crashes	Delete node_modules, run npm install, and try again.
Block missing from inserter	Verify the plugin is activated.

Platform: Windows
Tools: PowerShell required (Git Bash will cause errors), LocalWP, Visual Studio Code

Before You Start

• Windows 10 64-bit or Windows 11
• Node.js v18 or higher LTS
• LocalWP installed and running with green status indicator visible
• Visual Studio Code installed
• PowerShell open — not Git Bash and not Command Prompt

Use PowerShell, Not Git Bash

WordPress build scripts use cross-env and Node path separators that can break inside Git Bash on Windows.

Open PowerShell from the Start menu, or in Visual Studio Code, use the terminal dropdown and choose PowerShell.

Verify Node.js

Open PowerShell and run:

node -v

Expected result: v18 or higher.

The Four Files You Will Edit

• edit.js Controls what users see in the WordPress editor.
• save.js Generates the HTML saved to the database and displayed to visitors.
• style.scss Provides shared styling for both the editor and the front end.
• block.json Defines block attributes, supports, and metadata.

Step 1: Open PowerShell in Your Plugins Folder

In LocalWP, right-click the site and select Open Site Shell.

Or open PowerShell and run:

cd 'C:\Users\YourName\Local Sites\my-site\app\public\wp-content\plugins'

Replace YourName and my-site with your actual Windows username and LocalWP site folder name.

Step 2: Scaffold the Block Plugin

Create a new block plugin:

npx @wordpress/create-block my-notice-block

If prompted, type y and press Enter.

Step 3: Move Into the Block Folder

cd my-notice-block

Run all subsequent commands from this folder.

Step 4: Install Dependencies

npm install

This downloads the required packages into the node_modules directory.

Step 5: Start the Development Compiler

npm run start

Leave the PowerShell window open. The compiler will automatically rebuild assets when files change.

Step 6: Activate the Plugin

1. Go to WordPress Admin.
2. Navigate to Plugins.
3. Find My Notice Block.
4. Click Activate.

If the plugin is not visible, verify that the folder path used in Step 1 is correct.

Step 7: Open the Source Files

Open the plugin folder in Visual Studio Code.

The source files are located in the src directory:

• edit.js
• save.js
• style.scss
• block.json

Step 8: Add the noticeType Attribute

Add the following attribute to block.json:

"noticeType": {
  "type": "string",
  "default": "info"
}

This stores the notice type selected by the editor.

Step 9: Add a Type Selector

Import SelectControl and add it within InspectorControls:

import { SelectControl } from '@wordpress/components';

Bind the control to attributes.noticeType. The compiler rebuilds automatically whenever you save the file.

Step 10: Add the Type as a CSS Class

Update save.js to add the selected type as a CSS class:

<section className={
  `notice notice--${attributes.noticeType}`
}>

This connects the selected notice type to its corresponding styles.

Step 11: Style the Block

The provided style.scss includes styles for:

• Info notices
• Warning notices
• Error notices
• Success notices

The colors should meet WCAG contrast requirements. Verify any changes with a contrast checker before deploying.

Step 12: Insert and Test the Block

1. Create a new page.
2. Insert the Notice block using /notice.
3. Select a notice type in the sidebar.
4. Save the draft.
5. Preview the page in a new tab.

PowerShell Commands

Command	Purpose
npm install	Install project dependencies.
npm run start	Start the development compiler.
npm run build	Create a production build.
npm run lint:js	Check JavaScript for errors and style violations.
npm run lint:js -- --fix	Automatically fix linting issues where possible.
npm cache clean --force	Clear the npm cache if npm run start hangs or fails.
Ctrl + C	Stop the compiler in the current PowerShell window.

Common Errors and Fixes

Problem	Solution
Red block in editor	Remove and reinsert the block, then re-enter content to reset saved data.
Port 8887 already in use	Stop the other LocalWP site using that port, then try again.
node not found	Install Node.js LTS from nodejs.org/en/download.
Changes not appearing	Press F5. Do not use Ctrl + Shift + R to hard refresh.
npm run start crashes	Delete node_modules, run npm install, and try again.
Git Bash path errors	Switch to PowerShell. cross-env can break in Git Bash.
Execution policy error	Run: Set-ExecutionPolicy RemoteSigned -Scope CurrentUser