Gutenberg is now the future of WordPress and soon we are going to see full site editing capabilities using Gutenberg Block Editor. Gutenberg Blocks are revolutionizing the way we use WordPress and learning how to create custom blocks is surely a good investment since in the future there are tons of use cases for this skill.
WordPress custom blocks are easy to develop and unlocks a lot of potentials. This article is our introduction and index article of our Gutenberg Custom Block tutorial series. In this article, we will answer all your questions about what and why you should learn to create custom blocks and you’ll also get the list of articles of our custom block development series.
Table of Contents
What is Custom Block?
So first understand what is Custom Block? As the name suggests custom block simply is a block coded by ourselves. Gutenberg introduced a whole new way of creating websites using blocks and with the help of blocks designing and creation a website has become a lot easier (read more about it in this article).
Why should You Learn?
Now let’s understand why you should learn to code custom blocks and what is the benefit of coding our own custom blocks. The first and greatest advantage of coding a custom block is to fully design a site in a way you want no restriction by any plugin or theme and standing out from the competition is the key to success and custom blocks can surely help you in that.
Another great advantage of learning to code custom blocks is to launching your own block plugin. Gutenberg is very new now and very few plugins are available for it and this might be a good chance of creating something your own and launching it.
What’s in This Tutorial?
Well, it’s not an article but complete series of multiple articles designed for absolute beginners so even if you are new in coding you can easily follow along, however, some basic knowledge is still required which we have talked about in detail later in this article.
In this article series, we start from scratch and beginning and we will get to complete advance blocks by the end of the series. We will cover every single required aspect of the custom block so you can build any kind of custom block with full features.
Now if you are thinking about why we are creating multiple articles series, why don’t we create a single article? The answer is because it’s impossible to explain all the things of block in a single article. Custom Blocks are very new and have a lot of parts into them also even documentation for the custom blocks is not fully completed yet so making a series makes more sense for understanding it completely.
What are the Requirements?
Well, we have designed this series for beginners however by beginners we mean beginner for Block Development but you do need some prior knowledge of HTML, CSS, and JS. We will also use two variations of JavaScript ES 5 and ES Next. You may have noticed we haven’t added PHP to the list because that is not an absolute requirement because code will be written in mostly JavaScript.
List of Articles
So here is the list of articles on Gutenberg Custom Blocks:
How to Setup Development Environment for Gutenberg Easily: First start with how we can actually set up our laptop/computer for developing custom blocks. In this article, we are going to take a look at how we can set up a Gutenberg WordPress development environment in our local machines. To develop or code something for Gutenberg. If you want to create a custom theme, plugin, block, block pattern, or anything for Gutenberg with your own custom code this guide is for you.
Custom Block Development Part-1: Create Hello World Block: In this article, we are going to take a look at the building process of a custom paragraph block. We will build a “Hello World Block”, and take a look at how we can create a plugin for creating a custom block.
Custom Block Development Part-2: How to add styling in the block: In this article, we will create a static block with a heading, text, and button. We will also take a look at how we can add style to our block. We will see both the option inline styling and separate style sheet.
Custom Block Development Part-3: Editing Functionality in Block: In this article, we are going to make our block content editable so block users can edit the values from the block editor. We will also learn about wp packages, components, and props.
Custom Block Development Part-4: Advance Custom Block with ESNext: In this article, we are going to go advance and will learn about ESNext coding standards. We will learn what the ES5 and ESNext coding standards are benefits of using them. We will also learn about JSX and webpack and what is transpiler and how it works. We have also shared how you can continue using ES5 if you want.
Custom Block Development Part-5: Custom Block Category and Multiple Blocks: In this article, you’ll learn how you can create your own custom category for keeping your blocks and also how you can add create multiple blocks with only one plugin.
Custom Block Development Part-6: Toolbar and Sidebar for Blocks: In this article, we have shared how you can add toolbar controls and sidebar controls for giving customization options for your block. We have also taken a look at which one to use in which situation.
Custom Block Development Part-7: Image, Audio, Video in Block: In this article, we have learned to manipulate media for our block. First, we have learned how we can use our own custom SVG for our block icon. After that, we have learned how we can use Image, Audio, and Video in our custom block.
Custom Block Development Part-8: Dynamic Block: In this article, we have learned about dynamic custom blocks, we have learned what dynamic blocks are how they work and how can we create them. This one is our final article of the series, however, we will keep posting more articles in the future.
You can get the complete source code used in the complete series on my Github repo.
Conclusion
You should now have an idea of how you can create your own custom block and this article will help you in finding the things or articles you’ll gonna need for developing your own custom block. If you have any doubts, questions or suggestions make sure to share them in the comments below, I’ll make sure to reply to them.
Meanwhile, while you are take look at our other articles on Gutenberg Block Editor, these articles will help you getting better at Gutenberg and creating more amazing websites.
If you need help with your website visit Taskmod LLC.