Unlocking the Power of the Gutenberg Block Editor Custom HTML Block: Going Beyond HTML

Introduction

I have been talking about the Gutenberg editor and how much I like it. I have written a few articles about it.

Here are a list of my other Gutenberg Block Editor articles:

• Is the Gutenberg Block Editor Better than Both Elementor and Divi?
• Creating Page Templates with the Gutenberg Block Editor’s Reusable Blocks
• Gutenberg Block Editor: When to Use Editor Versus CSS Styles

In this article, I want to expand on the power of the block editor and the custom HTML block. I talked about this block before. The custom HTML block is the one that you use when none of the provided blocks give you exactly what you are looking for. Sometimes you just need to create something on your own and that is where you need at the very least HTML and CSS. I discuss other relevant languages in this article and tell you how much you should learn. Some of the languages are not necessary and are simply extra.

The Gutenberg Block Editor is Great With Their Blocks

Most of the time, I found the Gutenberg block editor to work great in most cases. I think that if you download plugins that give you more blocks, then you might be able to find what you need. I know a lot of people avoid coding as much as possible. This is why the other page builders exist like Divi and Elementor. I get it, but the block editor is so fast with GeneratePress, I would rather code some custom HTML blocks than try to deal with Divi and Elementor again.

What Happens When You Want Something That the Blocks Cannot Do?

Sometimes you just hit a point where it is time to create your own thing. The best part of creating your own custom blocks is that you are in 100% control of what it looks like and what it does. The avoidance of having to code just means that you will always be reliant on the provided blocks. Think about this journey that you are going on with your blog. You have an opportunity to learn something new. I will tell you that you pretty much can stop with just HTML and CSS. JS would be a distant third because you might want to learn basic jQuery if you create buttons with your custom blocks and need to add a click event for them. There is a simpler way to do this as I will discuss later in this article.

Learning Some Basic Front-End Coding

I recommend at least learning some basic front-end coding to assist in your blogging. I say assist because this is something that you might want to do in the rare instances that you want something special that the blocks do not provide. I only mention front-end coding because this is all that you really need, for the most part anyway. I really do not see the need for you to learn how to do the back-end because that might be too much for a simple blog. I will still talk about it to cover everything but I really do not want to take you away from creating content.

W3Schools: The First Place to Start Learning How to Code Websites

Whenever anyone asks me how to start coding websites, I always recommend going to W3Schools. This is a great place for anyone who wants to learn the basics because it is very simple and goes through the most important concepts line by line. I also like how they have a code editor that lets you change the code so that you can see how your changes will affect your web page. This is a great way to tinker with the code and make changes to it without worrying about breaking it. This is just a simulation and it takes a while to be able to change an actual website. The editor at least gives you a place to start writing code and building confidence. This is something that will take awhile. You should focus on your content more. I will start with the same language that is the starting point for everyone, HTML. HTML is very basic and focuses mostly on the structure of your web page.

HTML: Everything Starts Here

I really love HTML you cannot build a web page without it. Interestingly enough, you only need HTML to build web pages. The other parts of a web page that include CSS, JS and more are just extra. These extra languages make your pages prettier, interactive and dynamic, but not absolutely necessary. If you plan to create HTML custom blocks in Gutenberg, you need to learn HTML first. You can start your HTML journey at W3Schools. I will just talk about what HTML you should start learning in order to create custom HTML blocks. I am not going to actually show you how to do HTML here as that link to W3Schools that I provided will be able to do that for you.

Learn the Basics of HTML: Simple Text Formatting

I recommend going through the W3Schools HTML tutorial. You should learn basic things like how to format text using bold, italics and underline. Careful with using underlined text because people will think that it is a link. You should know about these tags because sometimes you want to format text within your paragraphs. If you need to format your headings, then use CSS for that since it will apply it to the whole heading and not just a part of it.

HTML Tags Come in Pairs: Opening and Closing

Most HTML tags come in pairs, an opening tag and a closing tag. The command paragraph or <p> tag, has its accompanying closing </p>. The slash in the end tag tells you that this is a closing tag. 

So you can have something like:

<p>This is my content inside these paragraph tags.</p>

This makes it so that the web browser that accesses the web page with these paragraph tags, knows what part of the content starts and ends with a paragraph. This is used to organize your content and keep everything in line. Everything has a start and an end. There are some exceptions though. The common image tag only has an open tag.

HTML Heading Tags: Very Important for Titling Your Sections and SEO

Heading tags are very important for your blog as they are needed to tell your reader what your paragraphs of contents are going to be about. These tags come in six different types, <h1> to <h6>. The size of the headers go from large to small, <h1> to <h6>. So <h1> is the largest and <h6> is the smallest. There is typically only one <h1> tag on a web page. The <h1> tag is basically the title of the page. In the block editor, the <h1> tag is the first heading that is used as the actual title of the page and what shows first when someone reads your article. Other tags like <h2> and <h3> are for heading and sub-headings. These tell the search engines what your content paragraphs will be about so be sure to title your headings well. Also, be sure that <h3> are placed after <h2> tags so that they follow the proper order and structure of HTML heading tags.

HTML Division Tags: Organizing and Structuring Your Content

You will definitely need to learn about creating divisions or <div> tags. These tags are very important as they create containers to place your content inside of. They work just like blocks in the Gutenberg editor. Also called divs for short, are necessary to structure and organize your content. The good part about the block editor is that it already generates the code to organize your HTML custom block. So you only really need to focus on creating just your custom block and nothing else around it. Divs can be very complicated as you can create a structure that has divs within divs. This is why you can create rows, columns, groups and stack if you look around the block editor, they are all created with divs and then styled with CSS.

Once you learn the basics of HTML, you should try to learn division tags because that is where you can make some fancy stuff. Technically, you could use rows and columns to wrap your custom block around then just add your basic HTML to the custom block. There are a lot of options on how to create custom blocks. I just mention division tags because that is something that you will use if you need full control over how you want to present your content in the block.The more HTML that you know, the more control you will have over how the content looks on your page. Once you understand a bit of HTML, you need to make your content look nice and spaced out so that it is readable. That is where CSS comes in.

CSS: You Need to Make Your HTML Look Pretty

CSS is what you will learn after HTML. These two go hand-in-hand and are the very minimum for creating custom blocks. You can learn CSS over at W3Schools and I will go over what I think are the most useful CSS properties that you will need for custom blocks. You should learn how to format text using CSS properties like “font-size”, “font-weight”, “font-style” and “text-transform”. These CSS properties are used to change the text size, bold, italicize and uppercase. So if your block has a header in it, then you  can use these properties to modify it. Another alternative is that you could just place a heading above your custom block. Depending on how complex your custom block is, you might use these properties in the future.

If you are interested in knowing when to use styles in the block editor or with CSS, then you find out more in this article that I wrote. This article talks about different situations where it is better to style your blocks in the editor. I also talk about using CSS in custom blocks so you might want to learn more about it in my other article.

Spacing Your Content: Padding and Margin

Not only does CSS make your content look pretty, but it also adds necessary spacing between everything. We call this white space, which makes it easier to read text because everything is not so close to each other. Our eyes need to be able to read without having to strain or squint. This is why there is a limit on how small text should be and how close words should be next to each other. Consider choosing fonts that are simple and basic and not fancy and hard-to-read. In HTML, there is something called the box model. This is basically a way how HTML uses margin and padding to space elements. You also see a border that can be used to highlight your content and resides between the margin and padding. Simply, margin is spacing between your HTML elements and padding is the spacing within your elements. You can set how much you need for each and they will space out your elements even more.

Set Spacing Around the Edges of Your Content

Looking at the box model, you see how spacing is placed around the edges of content. This helps your eyes focus on the center, where your content is. Pushing content to the center of the page means that your eyes will travel less when reading because they do not have to reach the edges from end to end. This makes reading your content not only easier with spacing but faster too. The reason why is that if the edges are just white space with no content, your eyes do not have to go all of the way over there and can start reading the next line of text. If you plan to create custom blocks. Make sure that you have spacing around your divs.

Line Height: Spacing Between Each Line of Paragraph Text

Margin and padding provide spacing around your HTML elements, but what about your actual paragraph of text? I always make sure to use a CSS property called “line-height”. Line height adjusts the spacing as you write out your paragraphs. There is a certain amount of line height that helps people read your articles so that each line of text is not squished together. How much line height you need is already determined in the block editor. I just mention it because I find this CSS property to be important if you ever need to adjust line height. Especially if you plan to create custom blocks that have buttons in them. The buttons might need a different amount of line height than what is the default.

HTML and CSS Should Be Enough For a Simple Blog

For a simple blog where you want to add something fancy, you could get by with just HTML and CSS. You really just rely on blocks but there comes a point and time where you want your website to look like something that was created outside a page builder. When you need a unique look that stands out, you might need to code some unique blocks yourself. So this is where I would say is good enough for blogging but in the next section, JS there might be something that you want to know how to do.

JS: Not Necessary But Can Be Useful At Times

Keeping in line with a simple blog, you might need to create a button that links to another page. This might be when you need to create a block that serves as a call-to-action where you want to convert users to performing an action like going to a certain page or filling out a form. In the case where you need to add interaction to your block elements, then you need to use JS. You can learn JS and jQuery at the same place that you learned HTML and CSS. JS works on the idea that when users interact with elements on your page, an action happens. These interactions are called events and will be explained in the next section.

JavaScript and Events: Button Clicks

JavaScript events are things like when a user clicks on a button, hovers over a menu or submits a form. These are various interactions that users can have with your pages. Button clicks are very common and the event that controls them is called an “on click event”. There are what are called event listeners. Event listeners written in jQuery, allow you to tell the button what action to perform when the user clicks on a button. The typical action is to send the user to another page. What that would mean is that when the user clicks on the button, send them to another page. This is pretty much the only thing that you would need to do in JS.

Make It Simple: Just Create Buttons and Link in With Blocks Or HTML Text Links

If JS is too much for you, then you can always just create buttons with the block editor. This is simpler because no coding is required. We are talking about where you have a custom block and it has buttons that you created in HTML and CSS. You could, just use <a> anchor tags and link them using the “href” attribute of the anchor tag. Then you would not need JS. So this is why I say that JS is really not necessary and you could stop at learning HTML and CSS. The rest of this article is going to talk about overflow because PHP and MySQL are both back-end languages and you will most likely never need them.

PHP: Only If You Want to Create Templates with Dynamic Content

PHP is the back-end language that is used in WordPress. You need to use this WordPress plugin that allows you output content using PHP. Then you need to use a shortcode to add this PHP snippet to your page. This goes way beyond the scope of what someone would need for a simple blog. So I do not have much to say here about PHP. This is why I placed the more technical and complex languages at the end of this article. These languages are more for large complicated websites that need to have a lot of special functionality. This might be functionality that might not even be found in a WordPress plugin. In that case we have to resort to PHP and MySQL. I am staying within the realm of a simple blog because most people just want a place of their own to share their thoughts online.

MySQL: I Think That This Is Extra and You Will Not Really Need This

Just like the previous section in PHP, MySQL is really not necessary. Just for your knowledge, MySQL is the language that handles your database. All of the databases of your blog like your posts for example reside inside a database. Basically how this works is that WordPress runs queries against your database for information and displays them. I just wanted to do a quick mention on MySQL so that I at least cover the main languages that go into your WordPress blog.

Summary

Using the custom HTML block in Gutenberg requires you to mostly just know HTML and CSS. Everything else gravy and JS might be the third language that you would need to know just enough for any custom buttons that you make link to another page. So take a look at the tutorials at W3Schools and go through a few of the HTML and CSS ones and see what you can create with the block editor. I know that there are a lot of things to do already to maintain your blog. If you ever become curious in creating your own custom blocks, then this article will give you an idea of how to approach it.