Translate WordPress Gutenberg Blocks Into Custom Modules - Ep. 9, Getting Started on Content Hub

In our previous videos, we looked at translating custom post types in WordPress to HubSpot as dynamic templates. Now it's time to translate some Gutenberg blocks into HubSpot as custom modules. So we're going to look at this media and text block and we're going to replicate it as a HubSpot custom module. I've gone ahead and created it by going to file, new file and I select module from the drop down. Now, after I did that, I went ahead and created my fields and then I created the code. So let's talk about the fields, then the code. We replicated all of the fields in Gutenberg. First I started with the content. We have an image and then text. And all of our content and text fields will live in this fields panel. And everything related to styles will live in the style fields panel. So I created an image, I went to add field search for image, and I added it that way. And I did the same with this rich text field and I named it Text for the marketer. Then I replicated this advanced custom classes field, and we could do the same for an HTML anchor if we wanted to. And that is a text field. So it must live in the fields panel. And now let's look at the style fields. The content fields are simple enough. The style fields, we have some alignment field, or we have an alignment field and then a left and right align for the image. Then we have some colors for the text and background, and then we have media and text settings. The only thing that I created from this was the media width, just to keep things simple. Notice how in Gutenberg all of the fields are grouped by properties, so we have our colors in one panel, then MediaText settings in another. What we did in HubSpot, we went ahead and grouped things by component instead, as we think that's a little bit better of a UX practice, because content creators think of things in components when they look at a piece of content. So in my style fields, I have this content alignment, and that's an alignment field. If you go to it, you can see a horizontal and vertical alignment subfields. And horizontal subfields are not relevant to our Gutenberg block, it's only vertical. So one thing that we'll need to do is hide this. And unfortunately there's only one way to hide it, and that is locally, we'll need to go ahead and pull this module or fetch it, and then create a hidden subfield for the horizontal subfield of this alignment field. How many times can I say field in one sentence? All Right. So we have an image group, and then this image group has our horizontal alignment option. Because this content alignment option has a horizontal field with left, center and right, it did not make sense to use it because there is no center option in Gutenberg. It's only left or right. So what we did was we created a choice field with a left value and a right value. In a choice field, we have the label and then the value on the right. And finally we gave a width field to this. And in Gutenberg, the minimum was 15, the max was 85, and it's defined, denominated in percentage, and we gave it a default value of 50. And make sure you give content creators a prefix or suffix if applicable, because it really helps them understand what this field is for. And then we also gave some help text here as well. You can display it as text or as a slider. Gutenberg was a slider, so we did that. And finally we have a background field. And the background field has a color or gradient option in Gutenberg, as you can see right here. And things are conditionally displayed based on this choice. We did that by going to the field that we created, in this instance, a color field. We went down to the display conditions panel, toggled it on, and then set it to display on this field's condition right here. So if it's equal to solid, then this whole color field will display. And we can preview all of these changes and conditions that we make by going to the preview button. It'll open up this in a tab. I'll reset this and let me go to the style tab. Up top, we can see our style fields. I'll go to the image. That group exists. That's great. In the background. Here's our choice. I'll select gradient, Gradient shows, and then the color shows when we see select solid. So everything's working with the editing experience of the content creator. Now we have to map all these fields to our markup. And how I did that was I went to the markup generated by WordPress and I just simply inspected this block and then I right clicked and copied the outer HTML. I formatted everything, changed the class names to something simpler like media text, and then I did the same for the css. So I went to the styles and I formatted the styles because it was minified. And then I just went and copied everything that was relevant to this block and I pasted it in the module CSS panel. Let's talk about these panels for a second. In the top module HTML file, we can Have Hubble and all of our dynamic styles, everything related to the fields that we've created. And then in the CSS and JavaScript panel, we can only have static content, we can't have dynamic Hubble driven content. So if you want to make them play nice together, there are several ways. For instance, this styles group, we could set it to CSS variables, which we have done in our dynamic styles and then we put our CSS variable in the CSS down here. Another thing we could do is create utility classes, which is what WordPress did. As you can see in the markup, this says align wide is stacked on mobile, etc. We opted not to do that because I feel like that's simple enough for you to get. I wanted to go ahead and choose the more complicated version because you are a experienced WordPress developer and you know how to do the simple stuff. Let's, you know, look at some fancier stuff to do. So we used a require CSS tag and then we opened up our HTML style tag and, and we put the scope CSS tag inside of it. And this will scope it to this particular instance of the module on a page. So I can put a bunch of models on a page, give it different styles, and this scoped CSS will only be tied to its specific instance. All right, so now that we've covered that and the css, let's go ahead and talk about our formatting. So I like to put my logic and variables up top, then I give the module my markup and then I put my dynamic styles at the very bottom. And one thing I will do when I'm developing is I'll open up HTML pre tag and pretty print something, usually the styles, because I can't remember everything. And when I pretty print, I can see all of the options and the values that are available in these groups and subfields. And that comes in handy quite often. And you'll see how I use some of these values to help my logic. And let's talk about the logic. One thing in CSS grid is a vertical align value of bottom. As you can see right here, the right hand side of the screen. Let me zoom in for you. A vertical align value of bottom, center or middle and top does not work in grid. So one thing that we needed to do was we needed to map these values to the correct CSS grid property. And one thing that we did was we took all of the values and we created this variable called alignment map, opened up an object, and in that object we set each possible value as A key. And then in my css I called the alignment map variable, opened up my brackets and used the module content alignment field value as the key. And then it outputs the correct CSS property. And you can see that it's working when I select bottom, middle and top. And so that's one way that we used this variable to map it to an object and then we use those values as keys. Was pretty helpful and it saved me from having to write a bunch of if statements. Another thing that I used was inline if statements for setting a variable. That comes in handy when you want to use some shorthand stuff. And then I did the same with the layout and in my styles I have all of those properties set with my logic up top at the bottom. And one last thing, I went ahead and added some. I added the fields, we need to talk about the actual fields and the content. So for our image, I deleted the image from our copy paste job from this WordPress markup. And then I went to the Actions button for this particular image field. Sorry, I'm in the styles, I need to go to the fields. I went to the actions button and I copied the snippet. Let me show you what happens in the Design Manager. It gives you snippets for some certain fields. And because I went to the image field, if you see in this particular module field, the only option I see is a lazy loading option. That's because I'm hiding available size options, so I don't need all of this logic that the snippet provides. So I went ahead and deleted that down here and I'm using a simpler version of this snippet. But the snippet is a great starting point whenever you're developing. And that's one of the advantages of developing in the Design Manager, especially as someone who's new to HubSpot, I recommend that you make modules in the Design Manager and then work to locally develop modules. So I use that snippet. Anything regarding text, I usually just copy the value only instead of the snippet because the snippet will give give you some extra markup and it will wrap this value in some HubSpot classes. So I just used the value for cleaner markup. And then what I did was I gave the advanced custom classes field a place in our class HTML class field. And that about covers what we did in the module. Now one last piece of advice. When you're developing a module, you're going to want to pretty print inside of a pre tag or just pretty print in general. Doesn't matter how you do it, make it pretty for yourself. And when you do that, you can see all of these values available to you. For instance, you know, I'm not going to remember that this background field, which, you know, this color subfield, has a css, has a CSS property. So one thing that happens in a style field, in a style color field is HubSpot will generate the CSS for you. And I forgot that. And instead of having to type all this stuff out and create my own logic to output a hex code versus something that's rgb if I decrease the opacity, this style field does it for me and it even does it for the gradient as well. As you can see, we'll have this yellow going to orange and then we'll give it a direction and then it outputs the CSS linear gradient to right, etc. So it saves me a lot of time. Definitely have this pretty print option on your page. It's gonna, you know, help you debug and not have to look up as much documentation. One thing, if you're, you know, always in JavaScript land, you can put a to JSON filter on there and you'll have something formatted how you like and are probably more used to. So that's one helpful tip that I can give as well. I'm going to sign off and I ask that you do one thing and that is like this video and all the previous videos that we've done. See you on the next video. Sa.